स्विच करें

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

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

पांचवीं इमेज. कस्टम कलर वाला स्विच.

अन्य संसाधन

• Material यूज़र इंटरफ़ेस (यूआई) वाले दस्तावेज़