لائحة التنقل

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

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

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

في 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