زر اختيار

يتيح زر الاختيار للمستخدم اختيار خيار من مجموعة من الخيارات. يتم استخدام زر اختيار عندما يمكن اختيار عنصر واحد فقط من قائمة. إذا كان المستخدمون بحاجة إلى اختيار أكثر من عنصر واحد، استخدِم مفتاح تبديل بدلاً من ذلك.

الشكل 1. زوج من أزرار الاختيار مع اختيار خيار واحد

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

استخدِم العنصر القابل للإنشاء RadioButton لعرض الخيارات المتاحة. لفّ كل خيار RadioButton وتصنيفه داخل مكوّن Row لتجميعهما معًا.

تتضمّن RadioButton المَعلمات الرئيسية التالية:

• selected: يشير إلى ما إذا كان زر الاختيار مفعّلاً.
• onClick: دالة LAMBDA يتم تنفيذها عند النقر على زر الاختيار. إذا كان هذا الخيار هو null، لا يمكن للمستخدم التفاعل مباشرةً مع زر الاختيار.
• ‫enabled: تتحكّم هذه السمة في ما إذا كان زر الاختيار مفعّلاً أو غير مفعّل. لا يمكن للمستخدمين التفاعل مع أزرار الاختيار غير المفعَّلة.
• ‫interactionSource: يتيح لك مراقبة حالة التفاعل مع الزر، على سبيل المثال، ما إذا تم الضغط عليه أو تم تمرير مؤشر الماوس فوقه أو تم التركيز عليه.

إنشاء زر اختيار أساسي

يعرض مقتطف الرمز البرمجي التالي قائمة بأزرار اختيار ضمن Column:

@Composable
fun RadioButtonSingleSelection(modifier: Modifier = Modifier) {
    val radioOptions = listOf("Calls", "Missed", "Friends")
    val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[0]) }
    // Note that Modifier.selectableGroup() is essential to ensure correct accessibility behavior
    Column(modifier.selectableGroup()) {
        radioOptions.forEach { text ->
            Row(
                Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .selectable(
                        selected = (text == selectedOption),
                        onClick = { onOptionSelected(text) },
                        role = Role.RadioButton
                    )
                    .padding(horizontal = 16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                RadioButton(
                    selected = (text == selectedOption),
                    onClick = null // null recommended for accessibility with screen readers
                )
                Text(
                    text = text,
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier.padding(start = 16.dp)
                )
            }
        }
    }
}
RadioButton.kt

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

• يمثّل الرمز radioOptions تصنيفات أزرار الاختيار.
• تنشئ الدالة القابلة للتجميع remember متغيّر حالة selectedOption ودالة لتعديل هذه الحالة تُسمى onOptionSelected. تحتوي هذه الحالة على خيار زر الاختيار المحدّد حاليًا.
  • mutableStateOf(radioOptions[0]) تبدأ الحالة بالعنصر الأول في القائمة. "المكالمات" هو العنصر الأول، لذا يكون زر الاختيار مفعّلاً فيه بشكلٍتلقائي.
• Modifier.selectableGroup() يضمن سلوك إمكانية الوصول المناسب لبرامج قراءة الشاشة. ويُعلم النظام بأنّ العناصر ضمن هذا العنصر Column هي جزء من مجموعة قابلة للاختيار، ما يتيح إمكانية استخدام برامج قراءة الشاشة بشكل صحيح.
• تؤدي Modifier.selectable() إلى جعل Row بأكمله يعمل كأحد العناصر القابلة للاختيار.
  • يشير selected إلى ما إذا كان قد تم اختيار Row الحالي استنادًا إلى حالة selectedOption.
  • تعدِّل دالة onClick lambda حالة selectedOption إلى الخيار الذي تم النقر عليه عند النقر على Row.
  • يُعلم role = Role.RadioButton خدمات تسهيل الاستخدام بأنّ Row يعمل كزر اختيار.
• RadioButton(...) تُنشئ العنصر القابل للتجميع RadioButton.
  • onClick = null على RadioButton تُحسِّن من إمكانية الاستخدام. يمنع ذلك زر الاختيار من معالجة حدث النقر مباشرةً، ويسمح لمعدِّل selectable في Row بإدارة حالة الاختيار وسلوك تسهيل الاستخدام.

النتيجة

الشكل 2. ثلاثة أزرار اختيار تم اختيار الخيار "الأصدقاء" فيها

مصادر إضافية

• تصميم Material: الأزرار