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

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

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

سطح 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 نمایش می دهد.

نتیجه

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

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

@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 با بردارهای تصویر مناسب و توضیحات محتوا نمایش می دهد.

نتیجه

منابع اضافی

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