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, ) ) }
लागू होने पर यह ऐसा दिखता है: