شريط تنقّل

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

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

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

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

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