Segmentierte Schaltfläche

Mit einer segmentierten Schaltfläche können Nutzer mehrere Optionen nebeneinander auswählen. 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 Elementen auswählen. Verwenden Sie Chips, wenn Sie mehr als fünf Elemente oder komplexere Auswahlmöglichkeiten haben.
Eine segmentierte Schaltflächenkomponente wird angezeigt. Mit der ersten Schaltfläche kann eine einzelne Auswahl getroffen werden, mit der zweiten Schaltfläche 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. Mit diesen Layouts werden SegmentedButtons richtig positioniert und dimensioniert. Sie haben die folgenden gemeinsamen Parameter:

  • space: Damit wird die Überlappung zwischen den Schaltflächen angepasst.
  • content: Enthält den Inhalt der segmentierten Schaltflächenzeile, in der in der Regel eine Sequenz von SegmentedButtons verwendet wird.

Segmentierte Schaltfläche für die Einzelauswahl erstellen

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

@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.
  • Hiermit wird eine Liste von options definiert, die die Schaltflächenlabels darstellen.
  • Mit SingleChoiceSegmentedButtonRow kann nur eine Schaltfläche ausgewählt werden.
  • Erstellt innerhalb der forEachIndexed-Schleife eine SegmentedButton für jede Option:
    • shape definiert die Form der Schaltfläche basierend auf ihrem Index und der Gesamtzahl der Optionen mit SegmentedButtonDefaults.itemShape.
    • onClick aktualisiert selectedIndex mit dem Index der angeklickten Schaltfläche.
    • selected legt den Auswahlstatus der Schaltfläche basierend auf selectedIndex fest.
    • label zeigt das Schaltflächenlabel mithilfe der zusammensetzbaren Funktion Text an.

Ergebnis

Eine segmentierte Schaltflächenkomponente mit den Optionen „Tag“, „Monat“ und „Woche“ wird angezeigt. Derzeit ist die Option „Tag“ ausgewählt.
Abbildung 2: Eine Schaltfläche für die Einzelauswahl 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 mit Symbolen erstellen, über die 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

  • Im Code wird die Variable selectedOptions mit remember und mutableStateListOf initialisiert. So wird der ausgewählte Status jeder Schaltfläche erfasst.
  • Im Code werden die Schaltflächen mit MultiChoiceSegmentedButtonRow umschlossen.
  • Innerhalb der forEachIndexed-Schleife wird für jede Option eine 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.
    • Wenn auf die Schaltfläche geklickt wird, wird der ausgewählte Status des entsprechenden Elements in selectedOptions umgekehrt.onCheckedChange
    • icon zeigt ein Symbol an, das auf SegmentedButtonDefaults.Icon und dem Häkchenstatus der Schaltfläche basiert.
    • label zeigt ein Symbol für das Label an. Dazu werden Icon-Kompositionen mit geeigneten Bildvektoren und Inhaltsbeschreibungen verwendet.

Ergebnis

Eine segmentierte Schaltflächenkomponente mit den Optionen „Zu Fuß“, „Mit dem Fahrrad“ und „Mit dem Auto“ wird angezeigt. Derzeit sind die Optionen „Zu Fuß“ und „Mit dem Auto“ ausgewählt.
Abbildung 2: Eine segmentierte Schaltfläche für die Mehrfachauswahl mit zwei ausgewählten Optionen.

Weitere Informationen