स्विच करें

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

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

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

अन्य संसाधन