لائحة التنقل

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

راجِع حالات الاستخدام الثلاث التالية لتنفيذ "لوحة التنقّل":

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

في أسلوب 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