شريط التنقل

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

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

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

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

استخدِم العنصرَين القابلَين للإنشاء 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