स्विच करें

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

यह लागू होने का तरीका इस तरह दिखता है:

पांचवीं इमेज. पसंद के हिसाब से रंगों वाला स्विच.

अन्य संसाधन

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