चेकबॉक्स

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

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

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

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

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

राज्य

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

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

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

लागू करना

अपने ऐप्लिकेशन में चेकबॉक्स बनाने के लिए, 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 के चेकबॉक्स