स्विच करें

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 यूज़र इंटरफ़ेस (यूआई) के दस्तावेज़