Optionsfeld

Mit einem Optionsfeld kann ein Nutzer eine Option aus einer Reihe von Optionen auswählen. Sie verwenden ein Optionsfeld, wenn aus einer Liste nur ein Element ausgewählt werden kann. Wenn Nutzer mehr als ein Element auswählen müssen, verwenden Sie stattdessen einen Schalter.

Abbildung 1: Ein Optionsfeldpaar, bei dem eine Option ausgewählt ist.

API-Oberfläche

Verwenden Sie die zusammensetzbare Funktion RadioButton, um die verfügbaren Optionen aufzulisten. Schließen Sie jede RadioButton-Option und ihr Label in eine Row-Komponente ein, um sie zu gruppieren.

RadioButton umfasst die folgenden wichtigen Parameter:

• selected: Gibt an, ob das Optionsfeld ausgewählt ist.
• onClick: Eine Lambda-Funktion, die von Ihrer App ausgeführt wird, wenn der Nutzer auf das Optionsfeld klickt. Wenn dieser Wert null ist, kann der Nutzer nicht direkt mit dem Optionsfeld interagieren.
• enabled: Steuert, ob das Optionsfeld aktiviert oder deaktiviert ist. Nutzer können nicht mit deaktivierten Optionsfeldern interagieren.
• interactionSource: Hiermit können Sie den Interaktionsstatus der Schaltfläche beobachten, z. B. ob sie gedrückt, mit dem Mauszeiger darauf bewegt oder fokussiert wurde.

Einfache Optionsschaltfläche erstellen

Das folgende Code-Snippet rendert eine Liste von Optionsfeldern in einem Column:

@Composable
fun RadioButtonSingleSelection(modifier: Modifier = Modifier) {
    val radioOptions = listOf("Calls", "Missed", "Friends")
    val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[0]) }
    // Note that Modifier.selectableGroup() is essential to ensure correct accessibility behavior
    Column(modifier.selectableGroup()) {
        radioOptions.forEach { text ->
            Row(
                Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .selectable(
                        selected = (text == selectedOption),
                        onClick = { onOptionSelected(text) },
                        role = Role.RadioButton
                    )
                    .padding(horizontal = 16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                RadioButton(
                    selected = (text == selectedOption),
                    onClick = null // null recommended for accessibility with screen readers
                )
                Text(
                    text = text,
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier.padding(start = 16.dp)
                )
            }
        }
    }
}
RadioButton.kt

Wichtige Punkte zum Code

• radioOptions steht für die Labels der Optionsfelder.
• Mit der zusammensetzbaren Funktion remember wird eine Statusvariable selectedOption und eine Funktion zum Aktualisieren dieses Status namens onOptionSelected erstellt. In diesem Status wird die ausgewählte Optionsfeldauswahl gespeichert.
  • mutableStateOf(radioOptions[0]) initialisiert den Status mit dem ersten Element in der Liste. „Anrufe“ ist das erste Element, also das standardmäßig ausgewählte Optionsfeld.
• Modifier.selectableGroup() sorgt für ein korrektes Verhalten in Bezug auf die Barrierefreiheit für Screenreader. Es informiert das System darüber, dass die Elemente in diesem Column-Element Teil einer auswählbaren Gruppe sind, was eine korrekte Unterstützung von Screenreadern ermöglicht.
• Mit Modifier.selectable() wird das gesamte Row als einzelnes auswählbares Element behandelt.
  • selected gibt an, ob die aktuelle Row basierend auf dem selectedOption-Status ausgewählt ist.
  • Die Lambda-Funktion onClick aktualisiert den Status selectedOption auf die angeklickte Option, wenn auf Row geklickt wird.
  • role = Role.RadioButton informiert Bedienungshilfen darüber, dass Row als Optionsfeld fungiert.
• Mit RadioButton(...) wird die zusammensetzbare Funktion RadioButton erstellt.
  • onClick = null auf der RadioButton verbessert die Bedienungshilfen. Dadurch wird verhindert, dass das Optionsfeld das Klickereignis direkt verarbeitet. Stattdessen kann der Row-Modifikator selectable den Auswahlstatus und das Verhalten der Bedienungshilfe verwalten.

Ergebnis

Abbildung 2. Drei Optionsfelder, wobei die Option „Freunde“ ausgewählt ist.

Zusätzliche Ressourcen

• Material Design: Schaltflächen