دکمه تقسیم بندی شده

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

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

شکل 1. یک دکمه تک انتخابی (1) و یک دکمه چند انتخابی (2).

سطح API

برای ایجاد دکمه های قطعه بندی شده از طرح بندی SingleChoiceSegmentedButtonRow و MultiChoiceSegmentedButtonRow استفاده کنید. این طرح‌بندی‌ها اطمینان حاصل می‌کنند که SegmentedButton به درستی در موقعیت و اندازه قرار گرفته‌اند و پارامترهای کلیدی زیر را به اشتراک می‌گذارند:

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

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

این مثال نحوه ایجاد یک دکمه تقسیم‌بندی تک انتخابی را نشان می‌دهد:

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

نکات کلیدی در مورد کد

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

نتیجه

شکل 2. یک دکمه تک انتخاب با یک گزینه انتخاب شده است.

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

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

@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"
                        )
                    }
                }
            )
        }
    }
}
SegmentedButton.kt

نکات کلیدی در مورد کد

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

نتیجه

شکل 2. یک دکمه تقسیم شده چند انتخابی با دو گزینه انتخاب شده است.

منابع اضافی

• ماده 3: دکمه های تقسیم بندی شده