Optionsfeld

Über ein Optionsfeld kann ein Nutzer eine Option aus einer Reihe von Optionen auswählen. Optionsfelder werden verwendet, wenn nur ein Element aus einer Liste ausgewählt werden kann. Wenn Nutzer mehr als ein Element auswählen müssen, verwende stattdessen einen Schalter.

API-Oberfläche

Verwenden Sie die zusammensetzbare Funktion RadioButton, um die verfügbaren Optionen aufzulisten. Fügen Sie jede RadioButton-Option und das zugehörige Label in eine Row-Komponente ein, um sie zu gruppieren.

RadioButton enthält die folgenden Schlüsselparameter:

• selected: Gibt an, ob das Optionsfeld ausgewählt ist.
• onClick: Eine Lambda-Funktion, die Ihre App ausführt, 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: Ermöglicht es Ihnen, den Interaktionsstatus der Schaltfläche zu beobachten, z. B. ob sie gedrückt, mit dem Mauszeiger berührt oder fokussiert ist.

Einfaches Optionsfeld erstellen

Mit dem folgenden Code-Snippet wird eine Liste von Optionsfeldern in einem Column gerendert:

@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 Zustandsvariable selectedOption und eine Funktion zum Aktualisieren dieses Zustands mit dem Namen onOptionSelected. Dieser Status enthält die ausgewählte Optionsfeldoption.
  • mutableStateOf(radioOptions[0]) initialisiert den Status auf das erste Element in der Liste. „Anrufe“ ist das erste Element und daher standardmäßig ausgewählt.
• Modifier.selectableGroup() sorgt für ein korrektes Verhalten der Bedienungshilfen für Screenreader. Dadurch wird das System darüber informiert, dass die Elemente innerhalb dieses Column-Elements Teil einer auswählbaren Gruppe sind, was eine ordnungsgemäße Screenreader-Unterstützung ermöglicht.
• Modifier.selectable() sorgt dafür, dass die gesamte Row als ein einzelnes auswählbares Element fungiert.
  • 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.
• RadioButton(...) erstellt die zusammensetzbare Funktion RadioButton.
  • onClick = null auf dem RadioButton verbessert die Barrierefreiheit. Dadurch wird verhindert, dass das Optionsfeld das Klickereignis direkt verarbeitet. Der selectable-Modifikator von Row kann dann den Auswahlstatus und das Verhalten für Bedienungshilfen verwalten.

Ergebnis

Zusätzliche Ressourcen

• Material Design: Buttons