रेडियो बटन

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

एपीआई सरफ़ेस

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

नतीजा

अन्य संसाधन

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