زر مقسّم

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

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

الشكل 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: الأزرار المقسّمة