स्विच करें

Switch कॉम्पोनेंट से उपयोगकर्ता दो स्थितियों के बीच टॉगल कर सकते हैं: सही का निशान लगाया गया और सही का निशान हटा दिया गया है. आपके ऐप्लिकेशन में किसी स्विच का इस्तेमाल करके, उपयोगकर्ता को इनमें से कोई एक काम करने की अनुमति दी जा सकती है: फ़ॉलो किया जा रहा है:

  • किसी सेटिंग को चालू या बंद करने के लिए टॉगल करें.
  • किसी सुविधा को चालू या बंद करें.
  • कोई विकल्प चुनें.

कॉम्पोनेंट के दो हिस्से होते हैं: थंब और ट्रैक. अंगूठे को खींचने और छोड़ने लायक है का हिस्सा है और ट्रैक, बैकग्राउंड है. उपयोगकर्ता अंगूठे को खींच सकता है बाएं या दाएं ले जाएं. वे यह भी टैप कर सकते हैं: इसे देखने और हटाने के लिए स्विच करें.

हल्के और गहरे रंग वाले मोड, दोनों में स्विच कॉम्पोनेंट के उदाहरण.
पहली इमेज. स्विच कॉम्पोनेंट.

बुनियादी तौर पर लागू करना

एपीआई की पूरी परिभाषा जानने के लिए, Switch का रेफ़रंस देखें. ये हैं कुछ ऐसे कुंजी पैरामीटर हैं जिनका आपको इस्तेमाल करना पड़ सकता है:

  • checked: स्विच का शुरुआती स्टेटस.
  • onCheckedChange: एक कॉलबैक जिसे तब कॉल किया जाता है, जब किए गए बदलावों को छोड़कर.
  • enabled: स्विच की सुविधा चालू है या बंद है.
  • colors: स्विच करने के लिए इस्तेमाल किए गए रंग.

इस उदाहरण में, Switch कंपोज़ेबल को लागू करने का छोटा सा उदाहरण दिया गया है.

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}

सही का निशान हटाने पर, यह तरीका इस तरह दिखता है:

एक बेसिक स्विच जिस पर सही का निशान नहीं लगा है.
दूसरी इमेज. सही का निशान हटाया गया स्विच.

सही का निशान लगाने पर यह दिखेगा:

ऐसा बेसिक स्विच जिसे चुना गया है.
तीसरी इमेज. सही का निशान लगा हुआ स्विच.

बेहतर तरीके से लागू करना

वे प्राथमिक पैरामीटर, जिनका उपयोग शायद आप ज़्यादा बेहतर पैरामीटर लागू करते समय करना चाहते हैं नीचे दिए गए स्विच हैं:

  • 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
        }
    )
}

इस तरीके में, सही का निशान नहीं लगाया गया है, वह इसके उदाहरण जैसा ही है पढ़ें. हालांकि, सही का निशान लगाने पर, यह लागू करने का तरीका ऐसा दिखता है अनुसरण करता है:

यह एक ऐसा स्विच है जो सही का निशान लगाने पर, कस्टम आइकॉन दिखाने के लिए थंबनेल कॉन्टेंट पैरामीटर का इस्तेमाल करता है.
चौथी इमेज. पसंद के मुताबिक सही के निशान वाले आइकॉन वाला स्विच.

कस्टम रंग

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

@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,
        )
    )
}

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

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

अन्य संसाधन