شريط التنقل

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

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

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

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

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

النتيجة

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

مراجع إضافية

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