شريط التنقل

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

• من ثلاث إلى خمس وجهات ذات أهمية متساوية
• أحجام النوافذ المُدمَجة
• وجهات متسقة على جميع شاشات التطبيق

الشكل 1. شريط تنقل يتضمّن 4 وجهات

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

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

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

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

• selected: لتحديد ما إذا كان سيتم تمييز العنصر الحالي بشكل مرئي
• onClick(): دالة lambda مطلوبة تحدّد الإجراء الذي يجب تنفيذه عندما ينقر المستخدم على العنصر. وعادةً ما تعالج في هذه الطريقة أحداث التنقّل أو تعدّل حالة العنصر المحدّد أو تحمّل المحتوى المرتبط.
• 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) } تُدير حالة العنصر المحدّد حاليًا.
• تدير var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } حالة العنصر المحدّد حاليًا.
  • تحصل startDestination.ordinal على الفهرس الرقمي (الموضع) لإدخال التعداد Destination.SONGS.
• عند النقر على عنصر، يتم استدعاء navController.navigate(route = destination.route) للانتقال إلى الشاشة المقابلة.
• تعمل دالة onClick lambda في NavigationBarItem على تعديل حالة selectedDestination لتسليط الضوء على العنصر الذي تم النقر عليه.
• ويُستخدَم هذا الإجراء للاتصال بعنصر AppNavHost القابل للتجميع، مع تمرير navController و startDestination، لعرض المحتوى الفعلي للشاشة المحدّدة.

النتيجة

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

الشكل 2. شريط تنقّل يحتوي على 3 وجهات مع رموز مرتبطة بها: "الأغاني" و"الألبوم" و"قائمة التشغيل"

مراجع إضافية

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