شريط تنقّل

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

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

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

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

استخدِم الرمز 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، لعرض المحتوى الفعلي للشاشة المحدّدة.

النتيجة

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

مراجع إضافية

• المادة 3: شريط التنقّل
• التنقّل باستخدام Compose