स्विच करें

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

  • किसी सेटिंग को चालू या बंद करने के लिए टॉगल करें.
  • किसी सुविधा को चालू या बंद करना.
  • कोई विकल्प चुनें.

कॉम्पोनेंट के दो हिस्से होते हैं: थंब और ट्रैक. स्विच का वह हिस्सा जिसे खींचा और छोड़ा जा सकता है उसे थंब कहा जाता है. वहीं, ट्रैक बैकग्राउंड होता है. स्विच की स्थिति बदलने के लिए, उपयोगकर्ता अंगूठे को बाईं या दाईं ओर खींच सकता है. वे इसे देखने और साफ़ करने के लिए स्विच पर टैप भी कर सकते हैं.

हल्के और गहरे रंग वाले मोड, दोनों में स्विच कॉम्पोनेंट के उदाहरण.
पहला डायग्राम. स्विच कॉम्पोनेंट.

बुनियादी तौर पर लागू करना

एपीआई की पूरी परिभाषा जानने के लिए, Switch का रेफ़रंस देखें. यहां कुछ ऐसे मुख्य पैरामीटर दिए गए हैं जिनका इस्तेमाल आपको करना पड़ सकता है:

  • checked: स्विच की शुरुआती स्थिति.
  • onCheckedChange: यह एक कॉलबैक होता है, जिसे स्विच की स्थिति बदलने पर कॉल किया जाता है.
  • enabled: स्विच चालू है या बंद.
  • colors: स्विच के लिए इस्तेमाल किए गए रंग.

यहां दिए गए उदाहरण में, Switch कॉम्पोज़ेबल को कम से कम लागू किया गया है.

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

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}
Switch.kt

सही का निशान हटाने पर, यह तरीका इस तरह दिखता है:

एक बुनियादी स्विच जिस पर सही का निशान नहीं लगा है.
दूसरी इमेज. बिना चुने गए स्विच.

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

एक बुनियादी स्विच जिसकी जांच की गई है.
तीसरी इमेज. चुना गया स्विच.

बेहतर तरीके से लागू करना

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

  • thumbContent: इस एट्रिब्यूट का इस्तेमाल करके, थंबनेल पर सही का निशान लगाने पर, उसके दिखने का तरीका पसंद के मुताबिक़ तय किया जा सकता है.
  • colors: इसका इस्तेमाल करके, ट्रैक और थंबनेल का रंग पसंद के मुताबिक बनाएं.

कस्टम थंबनेल

कस्टम थंबनेल बनाने के लिए, thumbContent पैरामीटर के लिए कोई भी कॉम्पोज़ेबल पास किया जा सकता है. यहां ऐसे स्विच का उदाहरण दिया गया है जो अपने थंबनेल के लिए कस्टम आइकॉन का इस्तेमाल करता है:

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

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        thumbContent = if (checked) {
            {
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize),
                )
            }
        } else {
            null
        }
    )
}
Switch.kt

इस प्रोसेस में, सही का निशान हटाए जाने का तरीका, पिछले सेक्शन में दिए गए उदाहरण जैसा ही होता है. हालांकि, सही का निशान लगाने पर, यह तरीका इस तरह दिखता है:

यह एक ऐसा स्विच है जो सही का निशान लगाने पर, कस्टम आइकॉन दिखाने के लिए थंबनेल कॉन्टेंट पैरामीटर का इस्तेमाल करता है.
चौथी इमेज. सही का निशान वाले कस्टम आइकॉन वाला स्विच.

कस्टम रंग

नीचे दिए गए उदाहरण में बताया गया है कि स्विच के थंब और ट्रैक का रंग बदलने के लिए, कलर पैरामीटर का इस्तेमाल कैसे किया जा सकता है. इसमें यह भी ध्यान रखा गया है कि स्विच चुना गया है या नहीं.

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

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = MaterialTheme.colorScheme.primary,
            checkedTrackColor = MaterialTheme.colorScheme.primaryContainer,
            uncheckedThumbColor = MaterialTheme.colorScheme.secondary,
            uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer,
        )
    )
}
Switch.kt

लागू होने पर यह ऐसा दिखता है:

यह एक स्विच है, जो रंगों के पैरामीटर का इस्तेमाल करके, थंब और टैक, दोनों के लिए कस्टम रंगों वाला स्विच दिखाता है.
पांचवीं इमेज. कस्टम कलर वाला स्विच.

अन्य संसाधन