चेकबॉक्स

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

• किसी आइटम को चालू या बंद करना.
• सूची में से एक से ज़्यादा विकल्पों में से कोई विकल्प चुनना.
• कानूनी समझौते या स्वीकार करने की जानकारी दें.

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

शरीर-रचना विज्ञान

चेकबॉक्स में ये एलिमेंट होते हैं:

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

राज्य

चेकबॉक्स की स्थिति इनमें से कोई एक हो सकती है:

• नहीं चुना गया: चेकबॉक्स नहीं चुना गया. बॉक्स खाली है.
• अनिश्चित: चेकबॉक्स की स्थिति अनिश्चित है. बॉक्स में डैश है.
• चुना गया: चेकबॉक्स चुना गया है. बॉक्स में सही का निशान लगा हो.

नीचे दी गई इमेज में, चेकबॉक्स की तीन स्थितियां दिखाई गई हैं.

पहला डायग्राम. चेकबॉक्स की तीन स्थितियां. चुने नहीं गए, तय नहीं किए गए, और चुने गए.

लागू करना

अपने ऐप्लिकेशन में चेकबॉक्स बनाने के लिए, Checkbox कॉम्पोज़ेबल का इस्तेमाल किया जा सकता है. ध्यान में रखने के लिए कुछ मुख्य पैरामीटर ये हैं:

• checked: यह बूलियन वैल्यू सेट होती है, जिससे यह पता चलता है कि चेकबॉक्स पर सही का निशान लगा है या नहीं.
• onCheckedChange(): वह फ़ंक्शन जिसे ऐप्लिकेशन तब कॉल करता है, जब उपयोगकर्ता चेकबॉक्स पर टैप करता है.

इस स्निपेट में, Checkbox कंपोज़ेबल को इस्तेमाल करने का तरीका बताया गया है:

@Composable
fun CheckboxMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Row(
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Text(
            "Minimal checkbox"
        )
        Checkbox(
            checked = checked,
            onCheckedChange = { checked = it }
        )
    }

    Text(
        if (checked) "Checkbox is checked" else "Checkbox is unchecked"
    )
}
Checkbox.kt

जवाब चुनने की वजह

यह कोड एक चेकबॉक्स बनाता है, जिस पर शुरुआत में सही का निशान नहीं होता. जब उपयोगकर्ता चेकबॉक्स पर क्लिक करता है, तो onCheckedChange लैम्ब्डा फ़ंक्शन, checked स्टेटस को अपडेट करता है.

नतीजा

इस उदाहरण में, सही का निशान हटाने पर यह कॉम्पोनेंट बनता है:

दूसरी इमेज. सही का निशान हटाया गया

सही का निशान लगाने पर, यह चेकबॉक्स इस तरह दिखता है:

तीसरी इमेज. चुना गया चेकबॉक्स

बेहतर उदाहरण

यहां एक ज़्यादा मुश्किल उदाहरण दिया गया है, जिसमें बताया गया है कि अपने ऐप्लिकेशन में चेकबॉक्स कैसे लागू किए जा सकते हैं. इस स्निपेट में, एक पैरंट चेकबॉक्स और कई चाइल्ड चेकबॉक्स हैं. जब उपयोगकर्ता पैरंट चेकबॉक्स पर टैप करता है, तो ऐप्लिकेशन सभी चाइल्ड चेकबॉक्स की जांच करता है.

@Composable
fun CheckboxParentExample() {
    // Initialize states for the child checkboxes
    val childCheckedStates = remember { mutableStateListOf(false, false, false) }

    // Compute the parent state based on children's states
    val parentState = when {
        childCheckedStates.all { it } -> ToggleableState.On
        childCheckedStates.none { it } -> ToggleableState.Off
        else -> ToggleableState.Indeterminate
    }

    Column {
        // Parent TriStateCheckbox
        Row(
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Text("Select all")
            TriStateCheckbox(
                state = parentState,
                onClick = {
                    // Determine new state based on current state
                    val newState = parentState != ToggleableState.On
                    childCheckedStates.forEachIndexed { index, _ ->
                        childCheckedStates[index] = newState
                    }
                }
            )
        }

        // Child Checkboxes
        childCheckedStates.forEachIndexed { index, checked ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Text("Option ${index + 1}")
                Checkbox(
                    checked = checked,
                    onCheckedChange = { isChecked ->
                        // Update the individual child state
                        childCheckedStates[index] = isChecked
                    }
                )
            }
        }
    }

    if (childCheckedStates.all { it }) {
        Text("All options selected")
    }
}
Checkbox.kt

जवाब चुनने की वजह

इस उदाहरण से आपको कई बातें पता चलती हैं. इन पर ध्यान दें:

• स्टेट मैनेजमेंट:
  • childCheckedStates: हर चाइल्ड चेकबॉक्स की चेक की गई स्थिति को ट्रैक करने के लिए mutableStateOf() का इस्तेमाल करने वाली बूलियन्स की एक सूची.
  • parentState: एक ToggleableState जिसकी वैल्यू, चाइल्ड चेकबॉक्स की स्थितियों से मिलती है.
• यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट:
  • TriStateCheckbox: यह पैरामीटर, माता-पिता के लिए बने चेकबॉक्स के लिए ज़रूरी है, क्योंकि इसमें एक state पैरामीटर होता है. इसकी मदद से, इसे 'जानकारी नहीं है' पर सेट किया जा सकता है.
  • Checkbox: इसका इस्तेमाल हर चाइल्ड चेकबॉक्स के लिए किया जाता है. इसकी स्थिति, childCheckedStates में मौजूद उस एलिमेंट से जुड़ी होती है.
  • Text: लेबल और मैसेज दिखाता है ("सभी चुनें", "विकल्प X", "सभी विकल्प चुने गए").
• लॉजिक:
  • पैरंट चेकबॉक्स का onClick, सभी चाइल्ड चेकबॉक्स को पैरंट चेकबॉक्स की मौजूदा स्थिति के उलट अपडेट करता है.
  • हर चाइल्ड चेकबॉक्स का onCheckedChange, childCheckedStates सूची में अपनी स्थिति अपडेट करता है.
  • जब सभी चाइल्ड चेकबॉक्स पर सही का निशान लगा होता है, तो कोड "All options selected" दिखाता है.

ध्यान दें: अगर आपको चेकबॉक्स की स्थिति तय नहीं करनी है, तो आपको TriStateCheckbox का इस्तेमाल करना होगा. ऐसा इसलिए है, क्योंकि इसमें state पैरामीटर का टाइप ToggleState है, जबकि Checkbox में ऐसा नहीं है.

नतीजा

इस उदाहरण में, सभी चेकबॉक्स से सही का निशान हटाने पर यह कॉम्पोनेंट दिखता है.

चौथी इमेज. चेकबॉक्स से सही का निशान हटाया गया

इसी तरह, जब उपयोगकर्ता सभी को चुनें पर टैप करता है, तो सभी विकल्पों को चुनने पर कॉम्पोनेंट इस तरह दिखता है:

पांचवीं इमेज. चुने गए चेकबॉक्स

जब सिर्फ़ एक विकल्प चुना जाता है, तो पैरंट चेकबॉक्स में 'जानकारी नहीं है' स्थिति दिखती है:

छठी इमेज. चेकबॉक्स को तय न करें

अन्य संसाधन

• मटीरियल डिज़ाइन चेकबॉक्स