شريط التنقل

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

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

الشكل 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) للانتقال إلى الشاشة المقابلة.
• تعدّل دالة lambda onClick في NavigationBarItem حالة selectedDestination لتسليط الضوء بشكل مرئي على العنصر الذي تم النقر عليه.
• تستدعي هذه الدالة العنصر القابل للإنشاء AppNavHost، وتمرِّر navController وstartDestination لعرض المحتوى الفعلي للشاشة المحدّدة.

النتيجة

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

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

مراجع إضافية

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