إنشاء تخطيط على تفاصيل القائمة

تفاصيل القائمة هي نمط لواجهة مستخدم يتكون من تنسيق ثنائي اللوحة حيث يكون جزء واحد قائمة بالعناصر وجزء آخر يعرض تفاصيل العناصر المحددة من هذه القائمة.

يُعد النمط مفيدًا بشكل خاص للتطبيقات التي توفر معلومات معلومات حول عناصر المجموعات الكبيرة، مثل برنامج بريد إلكتروني الذي يحتوي على قائمة بالرسائل الإلكترونية والمحتوى التفصيلي لكل رسالة بريد إلكتروني. يمكن أيضًا استخدام تفاصيل القائمة في المسارات الأقل أهمية مثل تقسيم التطبيق التفضيلات في قائمة من الفئات مع التفضيلات لكل فئة في جزء التفاصيل.

تنفيذ نمط واجهة المستخدم باستخدام ListDetailPaneScaffold

ListDetailPaneScaffold هي أداة قابلة للإنشاء تبسِّط تنفيذ نمط قائمة تفاصيل في تطبيقك. يمكن أن يتكون سقالة تفاصيل القائمة مما يصل إلى ثلاثة أجزاء: جزء القائمة وجزء التفاصيل وجزء إضافي اختياري. تشير رسالة الأشكال البيانية يتعامل مع عمليات حساب مساحة الشاشة. عندما يكون حجم الشاشة كافيًا يتم عرض جزء التفاصيل إلى جانب جزء القائمة. على الشاشة الصغيرة تتحول السقالة تلقائيًا إلى عرض إما القائمة أو جزء التفاصيل في وضع ملء الشاشة

جزء التفاصيل يظهر بجانب صفحة القائمة.
الشكل 1. عند توفر حجم كافٍ للشاشة، ستظهر تفاصيل بجانب لوحة القائمة.
بعد تحديد عنصر، يشغل جزء التفاصيل الشاشة بأكملها.
الشكل 2. عندما يكون حجم الشاشة محدودًا، فإن جزء التفاصيل (بسبب تحديد عنصر) يستحوذ على المساحة بالكامل

تعريف التبعيات

يمثّل ListDetailPaneScaffold جزءًا من التصميم التكيُّفي للمواد 3. .

يجب أن يتضمّن تطبيقك تبعيات لثلاث مكتبات Material 3 ذات صلة:

  • تكيُّفية: الوحدات الأساسية المنخفضة المستوى، مثل HingeInfo وPosture
  • التنسيق التكيفية: التخطيطات التكيُّفية مثل ListDetailPaneScaffold و SupportingPaneScaffold
    • التنقّل التكيُّفي: العناصر القابلة للإنشاء أثناء التنقّل بين الأجزاء

أضِف الاعتماديات إلى ملف build.gradle لتطبيقك أو الوحدة:

Kotlin


implementation("androidx.compose.material3.adaptive:adaptive:1.0.0-alpha12")
implementation("androidx.compose.material3.adaptive:adaptive-layout:1.0.0-alpha12")
implementation("androidx.compose.material3.adaptive:adaptive-navigation:1.0.0-alpha12")

رائع


implementation 'androidx.compose.material3.adaptive:adaptive:1.0.0-alpha12'
implementation 'androidx.compose.material3.adaptive:adaptive-layout:1.0.0-alpha12'
implementation 'androidx.compose.material3.adaptive:adaptive-navigation:1.0.0-alpha12'

الاستخدام الأساسي

تنفيذ ListDetailPaneScaffold على النحو التالي:

  1. استخدام فئة تمثّل المحتوى المطلوب اختياره هذا الصف يجب أن يكون Parcelable لإتاحة الحفظ. واستعادة عنصر القائمة المحدد. استخدام kotlin-parcelize المكون الإضافي لإنشاء الرمز لك.

    @Parcelize
class MyItem(val id: Int) : Parcelable
    SampleListDetailPaneScaffold.kt

  2. إنشاء ThreePaneScaffoldNavigator باستخدام rememberListDetailPaneScaffoldNavigator وإضافة BackHandler. هذا النمط للتنقل بين القائمة والتفاصيل والأجزاء الإضافية. من وإعلان نوع عام، فإن مستكشف التنقل يتعقب أيضًا حالة سقالة (أي الذي يتم عرضه MyItem). نظرًا لأن هذا النوع يمكن أن يتم حفظ الدولة واستعادتها من قِبل المستكشف تتعامل مع تغييرات التهيئة تلقائيًا. تشير رسالة الأشكال البيانية BackHandler دعمًا للرجوع باستخدام إيماءة الرجوع للنظام إلى الخلف أو . السلوك المتوقع لزر الرجوع يعتمد ListDetailPaneScaffold على حجم النافذة والمخزون الحالي. إذا كان بإمكان "ListDetailPaneScaffold" إتاحة الرجوع من خلال الحالة الحالية، فإن canNavigateBack() هي true، مما يؤدي إلى تفعيل BackHandler

    val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}
    SampleListDetailPaneScaffold.kt

  3. تمرير scaffoldState من navigator إلى ListDetailPaneScaffold قابل للإنشاء.

    ListDetailPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    // ...
)
    SampleListDetailPaneScaffold.kt

  4. اعرض تنفيذ جزء القائمة في 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)
                }
            )
        }
    },
    // ...
)
    SampleListDetailPaneScaffold.kt

  5. تضمين تنفيذ جزء التفاصيل في ListDetailPaneScaffold عند اكتمال التنقل، يحتوي currentDestination على الجزء انتقل إليه كل مستخدم، بما في ذلك المحتوى المعروض في الجزء. تشير رسالة الأشكال البيانية السمة content هي النوع نفسه المحدّد في طلب التذكّر الأصلي. (MyItem في هذا المثال)، ما يتيح لك أيضًا الوصول إلى الموقع لأي بيانات. التي تحتاج إلى عرضها.

    ListDetailPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    listPane =
    // ...
    detailPane = {
        AnimatedPane {
            navigator.currentDestination?.content?.let {
                MyDetails(it)
            }
        }
    },
)
    SampleListDetailPaneScaffold.kt

بعد تنفيذ الخطوات المذكورة أعلاه، يجب أن تبدو التعليمة البرمجية مشابهة لما يلي:

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)
            }
        }
    },
)
SampleListDetailPaneScaffold.kt

السابق
إنشاء تنقُّل تكيُّفي
التالي
بناء تخطيط لوحة داعمة