زبانه ها

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

• برگه های اصلی : در بالای صفحه محتوا در زیر نوار بالای برنامه قرار می گیرد. آنها مقصدهای محتوای اصلی را نمایش می دهند و باید در مواقعی که فقط به یک مجموعه از برگه ها نیاز است استفاده شوند.
• برگه های ثانویه : در یک منطقه محتوا برای جداسازی بیشتر محتوای مرتبط و ایجاد سلسله مراتب استفاده می شود. آنها زمانی ضروری هستند که یک صفحه به بیش از یک سطح تب نیاز دارد.

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

سطح API

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

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)
    }
}
Navigation.kt

نکات کلیدی

• 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 عبور می‌دهد.

نتیجه

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

منابع اضافی

• مواد 3 - زبانه ها
• پیمایش با نوشتن