برگه‌ها

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

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

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

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

برای پیاده‌سازی برگه‌ها، از ترکیب‌پذیرهای Tab،‏ PrimaryTabRow، و SecondaryTabRow استفاده کنید. Tab composable represents an individual tab within the row, and is typically used inside of a PrimaryTabRow (for primary indicator tabs) or SecondaryTabRow (for secondary indicator tabs).

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

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

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

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

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

نتیجه

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

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

منابع بیشتر