شريط تنقّل

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

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

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

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

استخدِم الدالة المركّبة 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