لائحة التنقل

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

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

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

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