نوار پیمایش

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

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

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

سطح میانای برنامه‌سازی کاربردی

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

نتیجه

تصویر زیر نوار پیمایش حاصل از گلچین قبلی را نشان می‌دهد:

منابع بیشتر

• Material 3 - نوار پیمایش
• پیمایش با Compose