Segmentierte Schaltfläche

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

  • Button für die Einzelauswahl: Nutzer können eine Option auswählen.
  • Mehrfachauswahl-Schaltfläche: 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 mit segmentierten Schaltflächen wird angezeigt. Mit dem ersten Button kann nur eine Auswahl getroffen werden, mit dem zweiten mehrere.
Abbildung 1. Einzelauswahl-Schaltfläche (1) und Mehrfachauswahl-Schaltfläche (2).

API-Oberfläche

Verwenden Sie die Layouts SingleChoiceSegmentedButtonRow und MultiChoiceSegmentedButtonRow, um segmentierte Schaltflächen zu erstellen. In 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, der in der Regel eine Folge von SegmentedButtons ist.

Segmentierten Button mit Einzelauswahl erstellen

In diesem Beispiel wird gezeigt, wie Sie einen segmentierten Button mit Einzelwahl 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 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 selectedIndex mit dem Index der angeklickten Schaltfläche aktualisiert.
    • Mit selected wird der Auswahlstatus des Buttons 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"
                        )
                    }
                }
            )
        }
    }
}

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 werden die Schaltflächen in MultiChoiceSegmentedButtonRow eingefügt.
  • Innerhalb der forEachIndexed-Schleife wird für jede Option ein SegmentedButton erstellt:
    • shape definiert die Form des Buttons basierend auf seinem 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 den Button 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: Ein segmentierter Button mit Mehrfachauswahl, bei dem zwei Optionen ausgewählt sind.

Zusätzliche Ressourcen