स्विच करें

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

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

कस्टम रंग

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

@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 UI के दस्तावेज़