زر مقسّم

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

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

مراجع إضافية