لائحة التنقل

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

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

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

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

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

مثال

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

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

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            HorizontalDivider()
            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