شريط التنقل

يسمح شريط التنقّل للمستخدمين بالتبديل بين الوجهات في أحد التطبيقات. يجب استخدام أشرطة التنقّل في الحالات التالية:

• ثلاث إلى خمس وجهات متساوية الأهمية
• أحجام النوافذ الصغيرة
• وجهات متّسقة على مستوى شاشات التطبيق

توضّح هذه الصفحة كيفية عرض شريط تنقّل في تطبيقك يتضمّن شاشات ذات صلة وتنقل أساسي.

واجهة برمجة التطبيقات

استخدِم العناصر المركّبة NavigationBar وNavigationBarItem لتنفيذ منطق التبديل بين الوجهات. يمثّل كل NavigationBarItem وجهة واحدة.

يتضمّن NavigationBarItem المَعلمات الرئيسية التالية:

• selected: تحدّد ما إذا كان العنصر الحالي مميّزًا بصريًا.
• onClick(): تحدّد الإجراء الذي سيتم تنفيذه عندما ينقر المستخدم على العنصر. يجب وضع منطق معالجة أحداث التنقّل أو تعديل حالة العنصر المحدّد أو تحميل المحتوى المقابل هنا.
• label: يعرض نصًا داخل العنصر. اختياريّ.
• icon: يعرض رمزًا داخل العنصر. اختياريّ.

مثال: شريط التنقّل السفلي

ينفّذ مقتطف الرمز التالي شريط تنقّل سفليًا يتضمّن عناصر تتيح للمستخدمين التنقّل بين شاشات مختلفة في أحد التطبيقات:

@Composable
fun NavigationBarExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}
Navigation.kt

النقاط الرئيسية

• يعرض NavigationBar مجموعة من العناصر، ويتطابق كل عنصر مع Destination.
• val navController = rememberNavController() ينشئ ويتذكّر مثيلاً من NavHostController، ويدير هذا المثيل التنقّل داخل NavHost.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } يدير حالة العنصر المحدّد.
  • يحصل startDestination.ordinal على الفهرس العددي (الموضع) لإدخال تعداد Destination.SONGS.
• عند النقر على أحد العناصر، يتم استدعاء navController.navigate(route = destination.route) للانتقال إلى الشاشة المقابلة.
• تعدِّل دالة Lambda الخاصة بـ onClick في NavigationBarItem حالة selectedDestination لتمييز العنصر الذي تم النقر عليه بصريًا.
• يستدعي منطق التنقّل العنصر المركّب AppNavHost مع تمرير navController وstartDestination لعرض المحتوى الفعلي للشاشة المحدّدة.

النتيجة

تعرض الصورة التالية شريط التنقّل الناتج عن مقتطف الرمز السابق:

مراجع إضافية

• ‫Material 3 - شريط التنقّل
• التنقّل باستخدام Compose