زر مقسّم

استخدِم زرًا مقسّمًا للسماح للمستخدمين باختيار خيار من مجموعة خيارات جنبًا إلى جنب. هناك نوعان من الأزرار المقسّمة:

• زر اختيار واحد: يسمح للمستخدمين باختيار خيار واحد.
• زرّ الاختيار المتعدّد: يتيح للمستخدمين الاختيار بين عنصرَين وخمسة عناصر. بالنسبة إلى الخيارات الأكثر تعقيدًا أو أكثر من خمسة عناصر، استخدِم شرائح.

الشكل 1. زر اختيار واحد (1) وزر اختيار متعدّد (2)

واجهة برمجة التطبيقات

استخدِم تنسيقَي SingleChoiceSegmentedButtonRow و MultiChoiceSegmentedButtonRow لإنشاء أزرار مجزّأة. تضمن هذه التنسيقات وضع SegmentedButton وحجمها بشكل صحيح، وتشارك المَعلمات الرئيسية التالية:

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

النقاط الرئيسية حول الرمز

• يبدأ متغيّر selectedIndex باستخدام remember و mutableIntStateOf لتتبُّع فهرس الزر المحدّد.
• تحدِّد قائمة options التي تمثّل تصنيفات الأزرار.
• يضمن الرمز SingleChoiceSegmentedButtonRow اختيار زر واحد فقط.
• لإنشاء SegmentedButton لكل خيار داخل حلقة forEachIndexed :
  • تحدِّد shape شكل الزر استنادًا إلى فهرسه وإجمالي عدد الخيارات باستخدام SegmentedButtonDefaults.itemShape.
  • تعمل دالة onClick على تعديل selectedIndex باستخدام فهرس الزر الذي تم النقر عليه.
  • تضبط selected حالة اختيار الزر استنادًا إلى selectedIndex.
  • تعرِض label تصنيف الزر باستخدام العنصر القابل للإنشاء Text.

النتيجة

الشكل 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

النقاط الرئيسية حول الرمز

• يُنشئ الرمز المتغيّر selectedOptions باستخدام remember و mutableStateListOf. تتتبّع هذه الحالة المحدّدة لكل زر.
• يستخدم الرمز MultiChoiceSegmentedButtonRow لاحتواء الأزرار.
• داخل حلقة forEachIndexed، تنشئ التعليمة البرمجية SegmentedButton لكل خيار:
  • shape يحدِّد شكل الزر استنادًا إلى فهرسه وإجمالي عدد الخيارات.
  • تضبط checked حالة الزر المحدَّدة استنادًا إلى القيمة المقابلة في selectedOptions.
  • يبدِّل onCheckedChange الحالة المحدّدة للعنصر المعني في selectedOptions عند النقر على الزر.
  • تعرِض icon رمزًا استنادًا إلى SegmentedButtonDefaults.Icon وحالة زر الاختيار.
  • label تعرِض رمزًا مطابقًا للتصنيف، باستخدام Icon عناصر قابلة للإنشاء تتضمّن متجهات صور وأوصاف محتوى مناسبة.

النتيجة

الشكل 2. زر مجزأ للاختيار المتعدّد تم اختيار خيارَين فيه

مصادر إضافية

• المادة 3: الأزرار المقسّمة