شريط تنقّل

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

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

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

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

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