برگه‌ها

برگه‌ها به شما امکان می‌دهند گروه‌های محتوای مرتبط را سازمان‌دهی کنید. دو نوع برگه وجود دارد:

  • برگه‌های اصلی: در بالای قاب محتوا زیر نوار برنامه برتر قرار می‌گیرند. این دکمه‌ها مقصد اصلی محتوا را نمایش می‌دهند و باید زمانی استفاده شوند که فقط یک مجموعه از برگه‌ها موردنیاز باشد.
  • برگه‌های ثانویه: در ناحیه محتوا برای جداسازی بیشتر محتوای مرتبط و ایجاد سلسله‌مراتب استفاده می‌شود. وقتی صفحه‌نمایش به بیش‌از یک سطح برگه نیاز داشته باشد، این برگه‌ها ضروری هستند.
۳ برگه اصلی با نمادهای مرتبط (پروازها، سفرها، و کاوش) نشان داده می‌شود. ‫۲ برگه ثانویه (نمای کلی، مشخصات) بدون نمادهای منسوب نشان داده می‌شود.
شکل ۱. برگه‌های اصلی (۱) و برگه‌های فرعی (۲).

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

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

برای پیاده‌سازی برگه‌ها، از عناصر ترکیبی Tab، PrimaryTabRow، و SecondaryTabRow استفاده کنید. عنصر ترکیبی Tab نشان‌دهنده برگه تکی در ردیف است و معمولاً در PrimaryTabRow (برای برگه‌های نشانگر اصلی) یا SecondaryTabRow (برای برگه‌های نشانگر فرعی) استفاده می‌شود.

‫Tab شامل پارامترهای کلیدی زیر است:

  • selected: تعیین می‌کند که آیا زبانه کنونی به‌صورت بصری برجسته شود یا نه.
  • onClick(): تابع لامبدای الزامی که کنشی را که باید وقتی کاربر روی زبانه کلیک می‌کند انجام شود تعریف می‌کند. در اینجا معمولاً رویدادهای پیمایش را مدیریت می‌کنید، وضعیت برگه انتخاب‌شده را به‌روزرسانی می‌کنید، یا محتوای مربوطه را بار می‌کنید.
  • text: نوشتار را در برگه نمایش می‌دهد. اختیاری.
  • ‫icon: نمادی را در زبانه نمایش می‌دهد. اختیاری.
  • ‫enabled: کنترل می‌کند که آیا زبانه فعال است و می‌توان با آن تعامل داشت یا نه. اگر روی نادرست تنظیم شود، برگه در حالت غیرفعال ظاهر می‌شود و به کلیک‌ها پاسخ نمی‌دهد.

مثال: پیمایش مبتنی بر برگه

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

@Composable
fun NavigationTabExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}

نکات کلیدی

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

نتیجه

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

۳ زبانه که به‌صورت افقی در بالای صفحه برنامه چیده شده‌اند. برگه‌ها شامل آهنگ‌ها، آلبوم، و فهرست پخش است، و برگه آهنگ‌ها انتخاب شده و زیر آن خط کشیده شده است.
شکل ۲. ۳ زبانه— آهنگ‌ها، آلبوم، و فهرست پخش— به‌صورت افقی چیده شده‌اند.

منابع بیشتر