لائحة التنقل

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

ضع في اعتبارك حالات الاستخدام الثلاث هذه لتنفيذ درج التنقل:

• تنظيم المحتوى: عليك أن تتيح للمستخدمين التبديل بين فئات مختلفة، كما هو الحال في تطبيقات الأخبار أو التدوين.
• إدارة الحساب: يمكنك توفير روابط سريعة إلى إعدادات الحساب وأقسام الملف الشخصي في التطبيقات التي تتضمن حسابات المستخدمين.
• اكتشاف الميزات: يمكنك تنظيم ميزات وإعدادات متعددة في قائمة واحدة لتسهيل اكتشاف المستخدمين والوصول إليه في التطبيقات المعقّدة.

في Material Design، هناك نوعان من أدراج التنقل:

• عادي: يمكنك مشاركة مساحة داخل شاشة مع محتوى آخر.
• نمطي: يظهر هذا العنوان فوق محتوى آخر على الشاشة.

مثال

يمكنك استخدام العنصر ModalNavigationDrawer القابل للإنشاء لتنفيذ لائحة التنقّل.

استخدِم الخانة drawerContent لتوفير ModalDrawerSheet وتقديم محتوى الدرج، كما في المثال التالي:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            Divider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

يقبل ModalNavigationDrawer عددًا من معلمات الدرج الإضافية. على سبيل المثال، يمكنك تبديل ما إذا كان الدرج يستجيب لعمليات السحب باستخدام المعلمة gesturesEnabled كما في المثال التالي:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

السلوك الخاضع للتحكُّم

للتحكّم في كيفية فتح الدرج وإغلاقه، استخدِم DrawerState. عليك ضبط من DrawerState إلى ModalNavigationDrawer باستخدام المَعلمة drawerState.

يوفّر DrawerState إمكانية الوصول إلى وظيفتَي open وclose، بالإضافة إلى السمات المرتبطة بحالة الدرج الحالية. تتطلّب دوال التعليق هذه وجود CoroutineScope، ويمكنك إنشاء مثيل له باستخدام rememberCoroutineScope. يمكنك أيضًا استدعاء دوال التعليق استجابة لأحداث واجهة المستخدم.

val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet { /* Drawer content */ }
    },
) {
    Scaffold(
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Show drawer") },
                icon = { Icon(Icons.Filled.Add, contentDescription = "") },
                onClick = {
                    scope.launch {
                        drawerState.apply {
                            if (isClosed) open() else close()
                        }
                    }
                }
            )
        }
    ) { contentPadding ->
        // Screen content
    }
}
MaterialLayoutSnippets.kt