نوار ناوبری

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

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

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

سطح API

از NavigationBar و NavigationBarItem composable برای پیاده سازی منطق سوئیچینگ مقصد استفاده کنید. هر NavigationBarItem نشان دهنده یک مقصد منحصر به فرد است.

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

• selected : تعیین می کند که آیا مورد فعلی به صورت بصری برجسته شده است یا خیر.
• onClick() : یک تابع لامبدا مورد نیاز است که عملی را که باید هنگام کلیک کاربر روی آیتم انجام شود را مشخص می کند. این جایی است که شما معمولاً رویدادهای ناوبری را مدیریت می کنید، وضعیت مورد انتخابی را به روز می کنید یا محتوای مربوطه را بارگیری می کنید.
• label : متن را در مورد نمایش می دهد. اختیاری.
• icon : نمادی را در داخل مورد نمایش می دهد. اختیاری.

مثال: نوار ناوبری پایین

قطعه زیر یک نوار ناوبری پایین را با موارد پیاده سازی می کند تا کاربران بتوانند بین صفحه های مختلف در یک برنامه حرکت کنند:

@Composable
fun NavigationBarExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}
Navigation.kt

نکات کلیدی

• NavigationBar مجموعه ای از موارد را نشان می دهد که هر مورد مربوط به یک Destination است.
• val navController = rememberNavController() نمونه ای از NavHostController را ایجاد می کند و به خاطر می آورد که ناوبری را در NavHost مدیریت می کند.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } وضعیت مورد انتخاب شده فعلی را مدیریت می کند.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } وضعیت مورد انتخاب شده فعلی را مدیریت می کند.
  • startDestination.ordinal شاخص عددی (موقعیت) ورودی enum Destination.SONGS را دریافت می کند.
• هنگامی که روی یک مورد کلیک می شود، navController.navigate(route = destination.route) فراخوانی می شود تا به صفحه مربوطه بروید.
• لامبدا onClick از NavigationBarItem حالت selectedDestination به روز می کند تا مورد کلیک شده را به صورت بصری برجسته کند.
• برای نمایش محتوای واقعی صفحه انتخابی، AppNavHost فراخوانی می‌کند و از navController و startDestination عبور می‌دهد.

نتیجه

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

منابع اضافی

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