चेकबॉक्स

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

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

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

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

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

राज्य

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

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

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

लागू करना

अपने ऐप्लिकेशन में चेकबॉक्स बनाने के लिए, 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 lambda से 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" दिखाता है जब सभी चाइल्ड चेकबॉक्स चुना गया.

नतीजा

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

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

जब सिर्फ़ एक विकल्प पर सही का निशान लगाया जाता है, तो पैरंट चेकबॉक्स में 'अनिश्चित राज्य:

अन्य संसाधन

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