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

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

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

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

از چیدمان‌های 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(
                            painter = rememberVectorPainter(AppIcons.DirectionsWalk),
                            contentDescription = "Directions Walk"
                        )
                        "Ride" -> Icon(
                            painter = rememberVectorPainter(AppIcons.DirectionsBus),
                            contentDescription = "Directions Bus"
                        )
                        "Drive" -> Icon(
                            painter = rememberVectorPainter(AppIcons.DirectionsCar),
                            contentDescription = "Directions Car"
                        )
                    }
                }
            )
        }
    }
}

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

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

نتیجه

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

منابع بیشتر