شريط تنقّل

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

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

شريط تنقّل عمودي على يمين الشاشة يتضمّن أربع وجهات (كل الملفات، والملفات الحديثة، والصور، والمكتبة)، ولكل وجهة رمز مرتبط بها، بالإضافة إلى زر الإجراء الرئيسي — **الشكل 1.** شريط تنقّل يتضمّن أربع وجهات وزر الإجراء الرئيسي.

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

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

استخدِم العنصر المركّب 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) للانتقال إلى الشاشة المقابلة.
تعدِّل دالة Lambda الخاصة بـ onClick في NavigationRailItem حالة selectedDestination لتمييز عنصر شريط التنقّل الذي تم النقر عليه بصريًا.
يستدعي العنصر المركّب AppNavHost، مع تمرير navController وstartDestination، لعرض المحتوى الفعلي للشاشة المحدّدة.

النتيجة

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

شريط تنقّل عمودي يتضمّن 3 وجهات مع أيقونات مرتبطة بها: الأغاني والألبوم وقائمة التشغيل تشير الرموز بشكل مرئي إلى الغرض من كل زر تنقّل في شريط التطبيق. يظهر رمز ذو صلة بكل وجهة (مثل نوتة موسيقية — **الشكل 2.** شريط تنقّل يتضمّن 3 وجهات مع رموز مرتبطة: "الأغاني" و"الألبوم" و"قائمة التشغيل"