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

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

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

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

एपीआई सरफेस

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

• 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 लूप में मौजूद हर विकल्प के लिए, एक 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 सही इमेज वेक्टर और कॉन्टेंट के ब्यौरे वाले कंपोज़ेबल का इस्तेमाल किया जाता है.

नतीजा

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

अन्य संसाधन

• Material 3: सेगमेंट किए गए बटन