تفاصيل القائمة هي نمط لواجهة مستخدم يتكون من تنسيق ثنائي اللوحة حيث يكون جزء واحد قائمة بالعناصر وجزء آخر يعرض تفاصيل العناصر المحددة من هذه القائمة.
يُعد النمط مفيدًا بشكل خاص للتطبيقات التي توفر معلومات معلومات حول عناصر المجموعات الكبيرة، مثل برنامج بريد إلكتروني الذي يحتوي على قائمة بالرسائل الإلكترونية والمحتوى التفصيلي لكل رسالة بريد إلكتروني. يمكن أيضًا استخدام تفاصيل القائمة في المسارات الأقل أهمية مثل تقسيم التطبيق التفضيلات في قائمة من الفئات مع التفضيلات لكل فئة في جزء التفاصيل.
تنفيذ نمط واجهة المستخدم باستخدام ListDetailPaneScaffold
ListDetailPaneScaffold
هي أداة قابلة للإنشاء تبسِّط تنفيذ
نمط قائمة تفاصيل في تطبيقك. يمكن أن يتكون سقالة تفاصيل القائمة مما يصل إلى
ثلاثة أجزاء: جزء القائمة وجزء التفاصيل وجزء إضافي اختياري. تشير رسالة الأشكال البيانية
يتعامل مع عمليات حساب مساحة الشاشة. عندما يكون حجم الشاشة كافيًا
يتم عرض جزء التفاصيل إلى جانب جزء القائمة. على الشاشة الصغيرة
تتحول السقالة تلقائيًا إلى عرض إما القائمة أو
جزء التفاصيل في وضع ملء الشاشة
تعريف التبعيات
يمثّل ListDetailPaneScaffold
جزءًا من التصميم التكيُّفي للمواد 3.
.
أضِف التبعيات الثلاثة التالية ذات الصلة إلى ملف build.gradle
في
التطبيق أو الوحدة:
Kotlin
implementation("androidx.compose.material3.adaptive:adaptive") implementation("androidx.compose.material3.adaptive:adaptive-layout") implementation("androidx.compose.material3.adaptive:adaptive-navigation")
Groovy
implementation 'androidx.compose.material3.adaptive:adaptive' implementation 'androidx.compose.material3.adaptive:adaptive-layout' implementation 'androidx.compose.material3.adaptive:adaptive-navigation'
- تكيُّفية: الوحدات الأساسية منخفضة المستوى، مثل
HingeInfo
وPosture
- التنسيق التكيفية: التخطيطات التكيُّفية مثل
ListDetailPaneScaffold
وSupportingPaneScaffold
- التنقّل التكيُّفي: العناصر القابلة للإنشاء أثناء التنقّل بين الأجزاء
الاستخدام الأساسي
تنفيذ ListDetailPaneScaffold
على النحو التالي:
استخدام فئة تمثّل المحتوى المطلوب اختياره هذا الصف يجب أن يكون
Parcelable
لإتاحة الحفظ. واستعادة عنصر القائمة المحدد. استخدام kotlin-parcelize المكون الإضافي لإنشاء الرمز لك.@Parcelize class MyItem(val id: Int) : Parcelable
إنشاء
ThreePaneScaffoldNavigator
باستخدامrememberListDetailPaneScaffoldNavigator
وإضافةBackHandler
. هذا النمط للتنقل بين القائمة والتفاصيل والأجزاء الإضافية. من مع الإعلان عن نوع عام، يتتبّع المستكشف أيضًا حالة سقالة (أي الذي يتم عرضهMyItem
). نظرًا لأن هذا النوع يمكن أن يتم حفظ الدولة واستعادتها من قِبل المستكشف تتعامل مع تغييرات التهيئة تلقائيًا. تشير رسالة الأشكال البيانيةBackHandler
دعمًا للرجوع باستخدام إيماءة الرجوع للنظام إلى الخلف أو . السلوك المتوقع لزر الرجوع يعتمدListDetailPaneScaffold
على حجم النافذة والمخزون الحالي. إذا كان بإمكان "ListDetailPaneScaffold
" إتاحة الرجوع من خلال الحالة الحالية، فإنcanNavigateBack()
هيtrue
، مما يؤدي إلى تفعيلBackHandler
val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
تمرير
scaffoldState
منnavigator
إلىListDetailPaneScaffold
قابل للإنشاء.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, // ... )
اعرض تنفيذ جزء القائمة في
ListDetailPaneScaffold
. استخدامAnimatedPane
لتطبيق الرسوم المتحركة للجزء الافتراضي أثناء التنقل. ثم استخدمThreePaneScaffoldNavigator
للانتقال إلى جزء التفاصيل،ListDetailPaneScaffoldRole.Detail
، واعرض العنصر الذي تم تمريره.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { MyList( onItemClick = { item -> // Navigate to the detail pane with the passed item navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) } ) } }, // ... )
تضمين تنفيذ جزء التفاصيل في
ListDetailPaneScaffold
عند اكتمال التنقل، يحتويcurrentDestination
على الجزء انتقل إليه كل مستخدم، بما في ذلك المحتوى المعروض في الجزء. تشير رسالة الأشكال البيانية السمةcontent
هي النوع نفسه المحدّد في طلب التذكّر الأصلي. (MyItem
في هذا المثال)، ما يتيح لك أيضًا الوصول إلى الموقع لأي بيانات. التي تحتاج إلى عرضها.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = // ... detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { MyDetails(it) } } }, )
بعد تنفيذ الخطوات المذكورة أعلاه، يجب أن تبدو التعليمة البرمجية مشابهة لما يلي:
val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { MyList( onItemClick = { item -> // Navigate to the detail pane with the passed item navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) }, ) } }, detailPane = { AnimatedPane { // Show the detail pane content if selected item is available navigator.currentDestination?.content?.let { MyDetails(it) } } }, )