زر مقسّم

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

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

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

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

  • 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 مع متجهات الصور وأوصاف المحتوى المناسبة.

النتيجة

يظهر مكوّن زر مقسَّم يتضمّن الخيارات "المشي" و"الاستعانة بخدمة نقل" و"القيادة". تم حاليًا اختيار خيارَي "المشي" و"الرحلة".
الشكل 3 زر مقسَّم يتيح خيارات متعدّدة مع تحديد خيارَين

مراجع إضافية