Optionsfeld

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

Abbildung 1: Zwei Optionsfelder, von denen eines ausgewählt ist.

API-Oberfläche

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

RadioButton umfasst die folgenden wichtigen Parameter:

• selected: Gibt an, ob das Optionsfeld ausgewählt ist.
• onClick: Eine Lambda-Funktion, die ausgeführt wird, wenn auf das Optionsfeld geklickt wird. Wenn das null ist, kann der Nutzer nicht direkt mit der Optionsschaltfläche interagieren.
• enabled: Damit wird festgelegt, ob das Optionsfeld aktiviert oder deaktiviert ist. Nutzer können nicht mit deaktivierten Optionsfeldern interagieren.
• interactionSource: Damit können Sie den Interaktionsstatus der Schaltfläche beobachten, z. B. ob sie gedrückt, angetippt oder fokussiert ist.

Einfache Optionsschaltfläche erstellen

Das folgende Code-Snippet rendert eine Liste von Optionsschaltflächen 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.
• Die zusammensetzbare Funktion remember erstellt eine Statusvariable selectedOption und eine Funktion zum Aktualisieren dieses Status namens onOptionSelected. In diesem Status wird die aktuell ausgewählte Optionsfeldoption gespeichert.
  • Mit mutableStateOf(radioOptions[0]) wird der Status auf das erste Element in der Liste initialisiert. „Anrufe“ ist das erste Element und daher ist das Optionsfeld standardmäßig ausgewählt.
• Modifier.selectableGroup() sorgt für die richtige Barrierefreiheit für Screenreader. Es informiert das System darüber, dass die Elemente in diesem Column Teil einer auswählbaren Gruppe sind, was eine ordnungsgemäße Screenreader-Unterstützung ermöglicht.
• Mit Modifier.selectable() wird der gesamte Row als ein 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 die Row geklickt wird.
  • role = Role.RadioButton informiert Bedienungshilfen darüber, dass Row als Optionsfeld dient.
• RadioButton(...) erstellt die RadioButton-Komposition.
  • onClick = null auf der RadioButton verbessert die Barrierefreiheit. Dadurch wird verhindert, dass das Optionsfeld das Klickereignis direkt verarbeitet, und der Modifikator selectable von Row kann den Auswahlstatus und das Bedienungshilfenverhalten verwalten.

Ergebnis

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

Weitere Informationen

• Material Design: Schaltflächen