ریل ناوبری

ریل ها در برنامه هایی که روی دستگاه هایی با صفحه نمایش بزرگ اجرا می شوند، دسترسی به مقصد را فراهم می کنند. شما باید از ریل ناوبری برای موارد زیر استفاده کنید:

• مقاصد سطح بالا که باید در هر جایی از برنامه قابل دسترسی باشند
• سه تا هفت مقصد اصلی
• طرح بندی تبلت یا دسکتاپ

این صفحه به شما نشان می دهد که چگونه ریل ها را در برنامه خود با صفحه های مرتبط و ناوبری اولیه نمایش دهید.

سطح API

NavigationRail قابل ترکیب با NavigationRailItem برای پیاده سازی ریل در برنامه خود استفاده کنید. NavigationRailItem یک آیتم ریلی را در ستون ریل نشان می دهد.

NavigationRailItem شامل پارامترهای کلیدی زیر است:

• selected : تعیین می کند که آیا مورد ریل فعلی به صورت بصری برجسته شده است یا خیر.
• onClick() : یک تابع لامبدا مورد نیاز است که عملی را که باید هنگام کلیک کاربر روی آیتم راه آهن انجام شود را مشخص می کند. این جایی است که شما معمولاً رویدادهای ناوبری را مدیریت می کنید، وضعیت مورد انتخابی راه آهن را به روز می کنید یا محتوای مربوطه را بارگیری می کنید.
• 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 شاخص عددی (موقعیت) ورودی enum Destination.SONGS را دریافت می کند.
• هنگامی که روی یک آیتم راه آهن کلیک می شود، navController.navigate(route = destination.route) برای حرکت به صفحه مربوطه فراخوانی می شود.
• لامبدا onClick از NavigationRailItem حالت selectedDestination به‌روزرسانی می‌کند تا آیتم ریلی کلیک‌شده را به‌صورت بصری برجسته کند.
• برای نمایش محتوای واقعی صفحه انتخابی، AppNavHost فراخوانی می‌کند و از navController و startDestination عبور می‌دهد.

نتیجه

تصویر زیر نتیجه قطعه قبلی را نشان می دهد:

منابع اضافی

• ماده 3 - ریل ناوبری
• پیمایش با نوشتن