Segmentierte Schaltfläche

Mit segmentierten Schaltflächen können Nutzer aus einer Reihe von Optionen auswählen, die nebeneinander angezeigt werden. Es gibt zwei Arten von segmentierten Schaltflächen:

  • Schaltfläche für die Einzelauswahl: Nutzer können eine Option auswählen.
  • Schaltfläche für die Mehrfachauswahl: Damit können Nutzer zwischen zwei und fünf Elemente auswählen. Bei komplexeren Auswahlmöglichkeiten oder mehr als fünf Elementen verwenden Sie Chips.
Eine Komponente für segmentierte Schaltflächen wird angezeigt. Mit der ersten Schaltfläche kann nur eine Auswahl getroffen werden, mit der zweiten mehrere.
Abbildung 1. Eine Schaltfläche für die Einzelauswahl (1) und eine Schaltfläche für die Mehrfachauswahl (2).

API-Oberfläche

Verwenden Sie die Layouts SingleChoiceSegmentedButtonRow und MultiChoiceSegmentedButtonRow, um segmentierte Schaltflächen zu erstellen. Bei diesen Layouts werden SegmentedButtons richtig positioniert und skaliert. Außerdem werden die folgenden wichtigen Parameter verwendet:

  • space: Passt die Überlappung zwischen den Schaltflächen an.
  • content: Enthält den Inhalt der Zeile mit segmentierten Schaltflächen, in der Regel eine Folge von SegmentedButtons.

Segmentierte Schaltfläche für die Einzelauswahl erstellen

In diesem Beispiel wird gezeigt, wie Sie eine segmentierte Schaltfläche für die Einzelauswahl erstellen:

@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

Wichtige Punkte zum Code

  • Initialisiert eine selectedIndex-Variable mit remember und mutableIntStateOf, um den Index der ausgewählten Schaltfläche zu verfolgen.
  • Definiert eine Liste von options, die die Schaltflächenlabels darstellen.
  • Mit SingleChoiceSegmentedButtonRow können Sie nur eine Schaltfläche auswählen.
  • Erstellt für jede Option eine SegmentedButton innerhalb der forEachIndexed-Schleife:
    • shape definiert die Form der Schaltfläche basierend auf ihrem Index und der Gesamtzahl der Optionen mit SegmentedButtonDefaults.itemShape.
    • onClick wird mit dem Index der angeklickten Schaltfläche aktualisiert.selectedIndex
    • Mit selected wird der Auswahlstatus der Schaltfläche basierend auf selectedIndex festgelegt.
    • label zeigt das Schaltflächenlabel mit der zusammensetzbaren Funktion Text an.

Ergebnis

Es wird eine segmentierte Schaltflächenkomponente mit den Optionen „Tag“, „Monat“ und „Woche“ angezeigt. Die Option „Tag“ ist derzeit ausgewählt.
Abbildung 2: Eine Einzelauswahl-Schaltfläche mit einer ausgewählten Option.

Segmentierte Schaltfläche mit Mehrfachauswahl erstellen

In diesem Beispiel wird gezeigt, wie Sie eine segmentierte Schaltfläche mit mehreren Auswahlmöglichkeiten und Symbolen erstellen, mit der Nutzer mehrere Optionen auswählen können:

@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

Wichtige Punkte zum Code

  • Der Code initialisiert die Variable selectedOptions mit remember und mutableStateListOf. Damit wird der ausgewählte Status jeder Schaltfläche erfasst.
  • Im Code wird MultiChoiceSegmentedButtonRow verwendet, um die Schaltflächen zu enthalten.
  • Innerhalb der forEachIndexed-Schleife wird für jede Option ein SegmentedButton erstellt:
    • shape definiert die Form der Schaltfläche basierend auf ihrem Index und der Gesamtzahl der Optionen.
    • Mit checked wird der Status der Schaltfläche basierend auf dem entsprechenden Wert in selectedOptions festgelegt.
    • onCheckedChange schaltet den ausgewählten Status des entsprechenden Elements in selectedOptions um, wenn auf die Schaltfläche geklickt wird.
    • icon zeigt ein Symbol basierend auf SegmentedButtonDefaults.Icon und dem angekreuzten Zustand der Schaltfläche an.
    • label zeigt ein Symbol an, das dem Label entspricht. Dazu werden Icon-Composables mit entsprechenden Bildvektoren und Inhaltsbeschreibungen verwendet.

Ergebnis

Es wird eine segmentierte Schaltflächenkomponente mit den Optionen „Zu Fuß“, „Mit dem Fahrrad“ und „Mit dem Auto“ angezeigt. Die Optionen „Zu Fuß“ und „Mit dem Auto“ sind derzeit ausgewählt.
Abbildung 3: Eine segmentierte Schaltfläche mit Mehrfachauswahl, bei der zwei Optionen ausgewählt sind.

Zusätzliche Ressourcen