شريط التنقل

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

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

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

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

استخدِم العنصرَين القابلَين للإنشاء 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 لعرض المحتوى الفعلي للشاشة المحدّدة.

النتيجة

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

مراجع إضافية

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