شريط التنقل

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

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

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

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

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

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

• ‫selected: تحدّد هذه السمة ما إذا كان العنصر الحالي مميّزًا بصريًا.
• onClick(): يحدّد الإجراء الذي سيتم تنفيذه عندما ينقر المستخدم على العنصر. Logic for handling navigation events, updating the selected item state, or loading corresponding content belongs here.
• ‫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) للانتقال إلى الشاشة المقابلة.
• تعدِّل دالة onClick Lambda في NavigationBarItem الحالة selectedDestination لتمييز العنصر الذي تم النقر عليه بشكل مرئي.
• يستدعي منطق التنقّل الدالة المركّبة AppNavHost، ويمرّر navController وstartDestination، لعرض المحتوى الفعلي للشاشة المحدّدة.

النتيجة

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

مراجع إضافية

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