रेडियो बटन

रेडियो बटन की मदद से, उपयोगकर्ता कई विकल्पों में से कोई एक विकल्प चुन सकता है. रेडियो बटन का इस्तेमाल तब किया जाता है, जब किसी सूची से सिर्फ़ एक आइटम चुना जा सकता है. अगर उपयोगकर्ताओं को एक से ज़्यादा आइटम चुनने हैं, तो स्विच का इस्तेमाल करें.

पहली इमेज. रेडियो बटन का एक जोड़ा, जिसमें से एक विकल्प चुना गया है.

एपीआई सरफ़ेस

उपलब्ध विकल्पों की सूची बनाने के लिए, RadioButton कंपोज़ेबल का इस्तेमाल करें. हर RadioButton विकल्प और उसके लेबल को एक Row कॉम्पोनेंट में रैप करें, ताकि उन्हें एक साथ ग्रुप किया जा सके.

RadioButton में ये मुख्य पैरामीटर शामिल हैं:

• selected: इससे पता चलता है कि रेडियो बटन चुना गया है या नहीं.
• onClick: एक लैम्डा फ़ंक्शन, जिसे आपका ऐप्लिकेशन तब लागू करता है, जब उपयोगकर्ता रेडियो बटन पर क्लिक करता है. अगर यह 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 कंपोज़ेबल बनाता है.
  • RadioButton पर onClick = null की सुविधा से, सुलभता को बेहतर बनाया जा सकता है. इससे रेडियो बटन, क्लिक इवेंट को सीधे तौर पर हैंडल नहीं कर पाता. साथ ही, Row के selectable मॉडिफ़ायर को, चुने गए स्टेटस और सुलभता व्यवहार को मैनेज करने की अनुमति मिलती है.

नतीजा

दूसरी इमेज. तीन रेडियो बटन, जिनमें "दोस्त" विकल्प चुना गया है.

अन्य संसाधन

• मटीरियल डिज़ाइन: बटन