شريط تنقّل

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

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

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

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

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