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: Nutzer können zwischen zwei und fünf Elementen wählen. Verwenden Sie Chips für komplexere Auswahlmöglichkeiten oder mehr als fünf Elemente.
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 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

  • Hiermit wird eine selectedIndex-Variable mit remember und mutableIntStateOf initialisiert, um den aktuell ausgewählten Schaltflächenindex 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 für jede Option in der forEachIndexed-Schleife eine SegmentedButton:
    • 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 erstellt der Code für jede Option eine SegmentedButton:
    • shape definiert die Form der Schaltfläche basierend auf ihrem Index und der Gesamtzahl der Optionen.
    • checked legt den angeklickten Status der Schaltfläche basierend auf dem entsprechenden Wert in selectedOptions fest.
    • 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 angeklickten Status der Schaltfläche basiert.
    • label zeigt ein Symbol an, das dem Label entspricht. 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