نوار پیمایش

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

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

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

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

از ترکیب‌پذیرهای 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 lambda از NavigationBarItem وضعیت selectedDestination را به‌روز می‌کند تا مورد کلیک‌شده را به‌صورت بصری برجسته کند.
• منطق پیمایش، AppNavHost قابل‌ترکیب را فراخوانی می‌کند و navController و startDestination را ارسال می‌کند تا محتوای واقعی صفحه انتخاب‌شده را نمایش دهد.

نتیجه

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

منابع بیشتر

• Material 3 - Navigation Bar
• پیمایش با Compose