रेडियो बटन

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

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

एपीआई का प्लैटफ़ॉर्म

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

नतीजा

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

अन्य संसाधन