زر مقسّم

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

  • زر اختيار واحد: يسمح للمستخدمين باختيار خيار واحد.
  • زرّ الاختيار المتعدّد: يتيح للمستخدمين الاختيار بين عنصرَين وخمسة عناصر. بالنسبة إلى الخيارات الأكثر تعقيدًا أو أكثر من خمسة عناصر، استخدِم شرائح.
يتم عرض مكوّن زر مقسّم. يسمح الزر الأول باختيار واحد، في حين يسمح الزر الثاني باختيارات متعددة.
الشكل 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) }
            )
        }
    }
}

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

  • يبدأ متغيّر 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"
                        )
                    }
                }
            )
        }
    }
}

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

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

النتيجة

يظهر مكوّن زر مجزّأ يتضمّن خيارات "المشي" و"التنقّل" و"القيادة". تم اختيار خيارَي "المشي" و"التنقّل" حاليًا.
الشكل 2. زر مجزأ للاختيار المتعدّد تم اختيار خيارَين فيه

مصادر إضافية