دکمه بخش‌بندی‌شده

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

  • دکمه انتخاب تکی: به کاربران امکان می‌دهد یک گزینه را انتخاب کنند.
  • دکمه چندانتخابی: به کاربران امکان می‌دهد بین دو تا پنج مورد را انتخاب کنند. برای انتخاب‌های پیچیده‌تر یا بیش‌از پنج مورد، از تراشه‌ها استفاده کنید.
مؤلفه دکمه بخش‌بندی‌شده نشان داده می‌شود. دکمه اول امکان انتخاب تکی را فراهم می‌کند، درحالی‌که دکمه دوم امکان انتخاب چندگانه را فراهم می‌کند.
شکل ۱. دکمه انتخاب تکی (۱) و دکمه انتخاب چندگانه (۲).

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

از چیدمان‌های SingleChoiceSegmentedButtonRow و MultiChoiceSegmentedButtonRow برای ایجاد دکمه‌های بخش‌بندی‌شده استفاده کنید. این چیدمان‌ها SegmentedButtons را به‌درستی در موقعیت و اندازه قرار می‌دهند، و پارامترهای کلیدی زیر را هم‌رسانی می‌کنند:

  • space: هم‌پوشانی بین دکمه‌ها را تنظیم می‌کند.
  • content: حاوی محتوای ردیف دکمه بخش‌بندی‌شده است که معمولاً توالی SegmentedButton است.

ایجاد دکمه بخش‌بندی‌شده تک‌انتخابی

این مثال نشان می‌دهد که چگونه می‌توان دکمه بخش‌بندی‌شده تک‌انتخابی ایجاد کرد:

@Composable
fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val options = listOf("Day", "Month", "Week")

    SingleChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                onClick = { selectedIndex = index },
                selected = index == selectedIndex,
                label = { Text(label) }
            )
        }
    }
}

نکات کلیدی درباره کد

  • متغیر selectedIndex را بااستفاده از remember و mutableIntStateOf برای پیگیری شاخص دکمه انتخاب‌شده مقداردهی اولیه می‌کند.
  • فهرستی از options را تعریف می‌کند که نشان‌دهنده برچسب‌های دکمه است.
  • SingleChoiceSegmentedButtonRow به شما امکان می‌دهد فقط یک دکمه را انتخاب کنید.
  • برای هر گزینه، SegmentedButton را در داخل حلقه forEachIndexed ایجاد می‌کند:
    • shape شکل دکمه را براساس نمایه‌اش و تعداد کل گزینه‌ها بااستفاده از SegmentedButtonDefaults.itemShape تعریف می‌کند.
    • ‫onClick با نمایه دکمه کلیک‌شده به‌روز می‌شود selectedIndex.
    • selected وضعیت انتخاب دکمه را براساس selectedIndex تنظیم می‌کند.
    • label برچسب دکمه را بااستفاده از عنصر ترکیبی Text نمایش می‌دهد.

نتیجه

عنصر دکمه دوبخشی با گزینه‌های «روز»، «ماه»، و «هفته» نمایش داده می‌شود. درحال‌حاضر گزینه «روز» انتخاب شده است.
شکل ۲. دکمه انتخاب تکی با یک گزینه انتخاب‌شده.

ایجاد دکمه بخش‌بندی چندانتخابی

این مثال نشان می‌دهد چگونه می‌توان دکمه چندانتخابی بخش‌بندی‌شده‌ای با نمادهایی ایجاد کرد که به کاربران امکان می‌دهد چند گزینه را انتخاب کنند:

@Composable
fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) {
    val selectedOptions = remember {
        mutableStateListOf(false, false, false)
    }
    val options = listOf("Walk", "Ride", "Drive")

    MultiChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                checked = selectedOptions[index],
                onCheckedChange = {
                    selectedOptions[index] = !selectedOptions[index]
                },
                icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) },
                label = {
                    when (label) {
                        "Walk" -> Icon(
                            imageVector =
                            Icons.AutoMirrored.Filled.DirectionsWalk,
                            contentDescription = "Directions Walk"
                        )
                        "Ride" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsBus,
                            contentDescription = "Directions Bus"
                        )
                        "Drive" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsCar,
                            contentDescription = "Directions Car"
                        )
                    }
                }
            )
        }
    }
}

نکات کلیدی درباره کد

  • کد متغیر selectedOptions را بااستفاده از remember و mutableStateListOf مقداردهی اولیه می‌کند. این وضعیت انتخاب‌شده هر دکمه را پیگیری می‌کند.
  • کد از MultiChoiceSegmentedButtonRow برای گنجاندن دکمه‌ها استفاده می‌کند.
  • در حلقه forEachIndexed، کد یک SegmentedButton برای هر گزینه ایجاد می‌کند:
    • shape شکل دکمه را براساس شاخص آن و تعداد کل گزینه‌ها تعریف می‌کند.
    • checked وضعیت علامت‌گذاری دکمه را براساس مقدار مربوطه در selectedOptions تنظیم می‌کند.
    • وقتی روی دکمه کلیک شود، onCheckedChange وضعیت انتخاب‌شده مورد مربوطه را در selectedOptions روشن/خاموش می‌کند.
    • icon نمادی براساس SegmentedButtonDefaults.Icon و وضعیت علامت‌گذاری دکمه نمایش می‌دهد.
    • ‫label بااستفاده از Icon ترکیب‌شونده‌های دارای بردار تصویر و شرح محتوای مناسب، نمادی متناسب با برچسب نمایش می‌دهد.

نتیجه

جزء دکمه‌ای بخش‌بندی‌شده با گزینه‌های «پیاده‌روی»، «سوار شدن»، و «رانندگی» نشان داده می‌شود. درحال‌حاضر گزینه‌های «پیاده‌روی و حمل‌ونقل عمومی» انتخاب شده است.
شکل ۳. دکمه چندانتخابی بخش‌بندی‌شده با دو گزینه انتخاب‌شده.

منابع بیشتر