सेगमेंट वाला बटन

सेगमेंट वाले बटन का इस्तेमाल करके, उपयोगकर्ताओं को एक साथ कई विकल्पों में से चुनने की सुविधा दें. सेगमेंट वाले बटन दो तरह के होते हैं:

• सिंगल-सिलेक्ट बटन: इससे उपयोगकर्ता एक विकल्प चुन सकते हैं.
• एक से ज़्यादा आइटम चुनने का बटन: इसकी मदद से, उपयोगकर्ता दो से पांच आइटम चुन सकते हैं. ज़्यादा जटिल विकल्पों या पांच से ज़्यादा आइटम के लिए, चिप का इस्तेमाल करें.

पहली इमेज. एक आइटम चुनने वाला बटन (1) और एक से ज़्यादा आइटम चुनने वाला बटन (2).

एपीआई का प्लैटफ़ॉर्म

सेगमेंट वाले बटन बनाने के लिए, SingleChoiceSegmentedButtonRow और MultiChoiceSegmentedButtonRow लेआउट का इस्तेमाल करें. इन लेआउट से यह पक्का होता है कि SegmentedButton सही जगह पर हों और उनका साइज़ सही हो. साथ ही, ये ये मुख्य पैरामीटर शेयर करते हैं:

• space: बटनों के बीच ओवरलैप को अडजस्ट करता है.
• content: इसमें सेगमेंट वाली बटन लाइन का कॉन्टेंट होता है. आम तौर पर, यह SegmentedButton का क्रम होता है.

सिंगल-सिलेक्ट सेगमेंट वाला बटन बनाना

इस उदाहरण में, सिंगल-सिलेक्ट सेगमेंट वाला बटन बनाने का तरीका बताया गया है:

@Composable
fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val options = listOf("Day", "Month", "Week")

    SingleChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                onClick = { selectedIndex = index },
                selected = index == selectedIndex,
                label = { Text(label) }
            )
        }
    }
}
SegmentedButton.kt

कोड के बारे में अहम जानकारी

• चुने गए बटन इंडेक्स को ट्रैक करने के लिए, remember और mutableIntStateOf का इस्तेमाल करके selectedIndex वैरिएबल को शुरू करता है.
• बटन लेबल दिखाने वाले options की सूची तय करता है.
• SingleChoiceSegmentedButtonRow से यह पक्का होता है कि सिर्फ़ एक बटन चुना जा सकता है.
• forEachIndexed loop के अंदर, हर विकल्प के लिए SegmentedButton बनाता है:
  • shape, बटन के इंडेक्स और SegmentedButtonDefaults.itemShape का इस्तेमाल करके विकल्पों की कुल संख्या के आधार पर, बटन का आकार तय करता है.
  • onClick, क्लिक किए गए बटन के इंडेक्स के साथ selectedIndex को अपडेट करता है.
  • selected, selectedIndex के आधार पर बटन की चुनी गई स्थिति सेट करता है.
  • label, Text कंपोज़ेबल का इस्तेमाल करके बटन का लेबल दिखाता है.

नतीजा

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

एक से ज़्यादा विकल्प चुनने वाला सेगमेंट वाला बटन बनाना

इस उदाहरण में, आइकॉन के साथ कई विकल्पों वाला सेगमेंट वाला बटन बनाने का तरीका बताया गया है. इससे उपयोगकर्ताओं को कई विकल्प चुनने में मदद मिलती है:

@Composable
fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) {
    val selectedOptions = remember {
        mutableStateListOf(false, false, false)
    }
    val options = listOf("Walk", "Ride", "Drive")

    MultiChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                checked = selectedOptions[index],
                onCheckedChange = {
                    selectedOptions[index] = !selectedOptions[index]
                },
                icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) },
                label = {
                    when (label) {
                        "Walk" -> Icon(
                            imageVector =
                            Icons.AutoMirrored.Filled.DirectionsWalk,
                            contentDescription = "Directions Walk"
                        )
                        "Ride" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsBus,
                            contentDescription = "Directions Bus"
                        )
                        "Drive" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsCar,
                            contentDescription = "Directions Car"
                        )
                    }
                }
            )
        }
    }
}
SegmentedButton.kt

कोड के बारे में अहम जानकारी

• कोड, remember और mutableStateListOf का इस्तेमाल करके selectedOptions वैरिएबल को शुरू करता है. यह हर बटन की चुनी गई स्थिति को ट्रैक करता है.
• बटन शामिल करने के लिए, कोड में MultiChoiceSegmentedButtonRow का इस्तेमाल किया जाता है.
• forEachIndexed लूप में, कोड हर विकल्प के लिए एक SegmentedButton बनाता है:
  • shape, इंडेक्स और विकल्पों की कुल संख्या के आधार पर बटन का आकार तय करता है.
  • checked, selectedOptions में मौजूद वैल्यू के आधार पर, बटन की चुने जाने की स्थिति सेट करता है.
  • onCheckedChange बटन पर क्लिक करने पर, selectedOptions में मौजूद उस आइटम की चुनी गई स्थिति को टॉगल कर देता है.
  • icon, SegmentedButtonDefaults.Icon और बटन के चुने गए स्टेटस के आधार पर आइकॉन दिखाता है.
  • label, लेबल से जुड़ा आइकॉन दिखाता है. इसके लिए, Icon composables का इस्तेमाल किया जाता है. इसमें सही इमेज वेक्टर और कॉन्टेंट के ब्यौरे शामिल होते हैं.

नतीजा

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

अन्य संसाधन

• तीसरा कॉन्टेंट: सेगमेंट वाले बटन