نوار ناوبری

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

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

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

سطح API

از کامپوننت‌های NavigationBar و NavigationBarItem برای پیاده‌سازی منطق تغییر مقصد استفاده کنید. هر 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) } وضعیت آیتم انتخاب شده را مدیریت می‌کند.
  • startDestination.ordinal اندیس عددی (موقعیت) ورودی شمارشی Destination.SONGS را برمی‌گرداند.
• وقتی روی یک آیتم کلیک می‌شود، navController.navigate(route = destination.route) برای پیمایش به صفحه مربوطه فراخوانی می‌شود.
• لامبدا onClick مربوط به NavigationBarItem وضعیت selectedDestination را به‌روزرسانی می‌کند تا آیتم کلیک‌شده را به‌صورت بصری هایلایت کند.
• منطق ناوبری، AppNavHost composable را فراخوانی می‌کند و navController و startDestination را ارسال می‌کند تا محتوای واقعی صفحه انتخاب شده را نمایش دهد.

نتیجه

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

منابع اضافی

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