ریل پیمایش

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

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

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

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

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

نتیجه

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

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

منابع بیشتر