زر اختيار

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

مساحة عرض واجهة برمجة التطبيقات

استخدِم الدالة المركّبة 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 إلى تحسين إمكانية الوصول. يمنع ذلك زر الاختيار من معالجة حدث ناتج عن النقر مباشرةً، ويتيح لعنصر التعديل Rowselectable إدارة الحالة وسلوك تسهيل الاستخدام.

النتيجة

مراجع إضافية

• ‫التصميم المتعدد الأبعاد: الأزرار