चेकबॉक्स

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

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

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

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

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

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

राज्य

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

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

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

लागू करना

अपने ऐप्लिकेशन में चेकबॉक्स बनाने के लिए, 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" दिखाता है.

नतीजा

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

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

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

अन्य संसाधन

• Material Design वाले चेकबॉक्स