Segmentierte Schaltfläche

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

  • Button für Einzelauswahl: Nutzer können eine Option auswählen.
  • Button für Mehrfachauswahl: Nutzer können zwischen zwei und fünf Elementen auswählen. Für komplexere Auswahlmöglichkeiten oder mehr als fünf Elemente sollten Sie Chips verwenden.
Eine Komponente für segmentierte Schaltflächen wird angezeigt. Mit der ersten Schaltfläche ist eine Einzelauswahl möglich, mit der zweiten eine Mehrfachauswahl.
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. Diese Layouts positionieren und dimensionieren SegmentedButtons korrekt und haben die folgenden Schlüsselparameter gemeinsam:

  • space: Passt die Überlappung zwischen den Buttons an.
  • content: Enthält den Inhalt der segmentierten Schaltflächenzeile, die in der Regel eine Sequenz von SegmentedButtons ist.

Segmentierte Schaltfläche mit Einzelauswahl erstellen

In diesem Beispiel wird gezeigt, wie Sie eine segmentierte Schaltfläche mit 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) }
            )
        }
    }
}

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 in der forEachIndexed-Schleife für jede Option ein SegmentedButton:
    • shape definiert die Form des Buttons anhand seines Index und der Gesamtzahl der Optionen mit SegmentedButtonDefaults.itemShape.
    • onClick aktualisiert selectedIndex mit dem Index des angeklickten Buttons.
    • selected legt den Auswahlstatus des Buttons basierend auf selectedIndex fest.
    • label zeigt das Buttonlabel mit der zusammensetzbaren Funktion Text an.

Ergebnis

Eine segmentierte Schaltflächenkomponente mit den Optionen „Tag“, „Monat“ und „Woche“ wird angezeigt. Die Option „Tag“ ist derzeit ausgewählt.
Abbildung 2. Eine Schaltfläche mit Einfachauswahl, bei der eine Option ausgewählt ist.

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

Wichtige Punkte zum Code

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

Ergebnis

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

Zusätzliche Ressourcen