زر مقسّم

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

  • زر الاختيار الواحد: يتيح للمستخدمين تحديد خيار واحد.
  • زر الاختيار المتعدّد: يتيح للمستخدمين اختيار ما بين عنصرَين وخمسة عناصر. بالنسبة إلى الخيارات الأكثر تعقيدًا أو التي تتضمّن أكثر من خمسة عناصر، استخدِم الشرائح.
يتم عرض مكوّن زر مقسّم. يسمح الزر الأول باختيار واحد، بينما يسمح الزر الثاني باختيارات متعددة.
الشكل 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(
                            painter = rememberVectorPainter(AppIcons.DirectionsWalk),
                            contentDescription = "Directions Walk"
                        )
                        "Ride" -> Icon(
                            painter = rememberVectorPainter(AppIcons.DirectionsBus),
                            contentDescription = "Directions Bus"
                        )
                        "Drive" -> Icon(
                            painter = rememberVectorPainter(AppIcons.DirectionsCar),
                            contentDescription = "Directions Car"
                        )
                    }
                }
            )
        }
    }
}

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

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

النتيجة

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

مراجع إضافية