चेकबॉक्स

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

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

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

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

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

राज्य

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

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

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

लागू करना

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

नतीजा

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

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

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

अन्य संसाधन

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