شريط تنقّل

توفّر القضبان إمكانية الوصول إلى الوجهات في التطبيقات التي تعمل على الأجهزة ذات الشاشات الكبيرة. يجب استخدام شرائط التنقّل في الحالات التالية:

• الوجهات الرئيسية التي يجب أن تكون متاحة في أي مكان في التطبيق
• من ثلاث إلى سبع وجهات رئيسية
• تخطيطات الأجهزة اللوحية أو أجهزة الكمبيوتر المكتبية

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

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

استخدِم الدالة المركّبة NavigationRail مع NavigationRailItem لتنفيذ شريط تنقّل في تطبيقك. يمثّل NavigationRailItem عنصرًا واحدًا في عمود شريط التنقّل الجانبي.

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

• ‫selected: تحدّد هذه السمة ما إذا كان عنصر الشريط الحالي مميّزًا بصريًا.
• ‫onClick(): دالة Lambda مطلوبة تحدّد الإجراء الذي سيتم تنفيذه عندما ينقر المستخدم على عنصر في شريط التنقّل. هذا هو المكان الذي تتعامل فيه عادةً مع أحداث التنقل، أو تحديث حالة عنصر السكة المحدد، أو تحميل المحتوى المقابل.
• ‫label: يعرض هذا الإعداد النص داخل عنصر الشريط. اختيارية:
• ‫icon: يعرض هذا الرمز رمزًا داخل عنصر الشريط. اختيارية:

مثال: التنقّل المستند إلى السكك الحديدية

ينفّذ المقتطف التالي شريط تنقّل حتى يتمكّن المستخدمون من التنقّل بين شاشات مختلفة في التطبيق:

@Composable
fun NavigationRailExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(modifier = modifier) { contentPadding ->
        NavigationRail(modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                NavigationRailItem(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    icon = {
                        Icon(
                            destination.icon,
                            contentDescription = destination.contentDescription
                        )
                    },
                    label = { Text(destination.label) }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

النقاط الرئيسية

• يعرض NavigationRail عمودًا رأسيًا من عناصر شريط التنقّل، حيث يتوافق كل عنصر مع Destination.
• تنشئ دالة val navController = rememberNavController() مثيلاً من NavHostController وتتذكره، وهو يدير التنقّل داخل NavHost.
• يدير "var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }" حالة عنصر شريط التنقّل المحدّد.
  • تحصل الدالة startDestination.ordinal على الفهرس الرقمي (الموضع) لإدخال التعداد Destination.SONGS.
• عند النقر على عنصر في شريط التنقّل، يتم استدعاء navController.navigate(route = destination.route) للانتقال إلى الشاشة المقابلة.
• تعدِّل دالة onClick Lambda في NavigationRailItem الحالة selectedDestination لتمييز عنصر شريط التنقّل الذي تم النقر عليه بشكل مرئي.
• وتستدعي الدالة المركّبة AppNavHost، وتمرّر navController وstartDestination لعرض المحتوى الفعلي للشاشة المحدّدة.

النتيجة

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

مراجع إضافية

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