ریل پیمایش

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

  • مقصدهای سطح بالا که باید در هرجایی از برنامه دردسترس باشند
  • سه تا هفت مقصد اصلی
  • چیدمان‌های رایانه لوحی یا رایانه رومیزی
یک ریل پیمایش عمودی در سمت چپ صفحه با چهار مقصد (همه فایل‌ها، اخیر، عکس‌ها، و کتابخانه)، هرکدام با نماد مرتبط، و یک دکمه کنش شناور.
شکل ۱. ریل پیمایش با چهار مقصد و یک دکمه کنش شناور.

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

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

از ترکیب‌پذیر 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)
    }
}

نکات کلیدی

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

نتیجه

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

ریل پیمایش عمودی با ۳ مقصد با نمادهای مرتبط: آهنگ‌ها، آلبوم، و فهرست پخش. نمادها به‌صورت تصویری هدف هر دکمه پیمایش را در ریل نشان می‌دهند. هر مقصد نماد مربوط به خود را دارد (مثلاً نت موسیقی برای «آهنگ‌ها»).
شکل ۲. ریل پیمایش که شامل ۳ مقصد با نمادهای مرتبط است: آهنگ‌ها، آلبوم، و فهرست پخش.

منابع بیشتر