Przycisk radiowy

Opcja umożliwia użytkownikowi wybranie jednej z kilku opcji. Przycisku opcji używa się, gdy z listy można wybrać tylko 1 element. Jeśli użytkownicy muszą wybrać więcej niż 1 element, użyj przełącznika.

Rysunek 1. Para przycisków opcji z wybraną jedną opcją.

Powierzchnia interfejsu API

Użyj komponentu RadioButton, aby wyświetlić listę dostępnych opcji. Umieść każdą RadioButtonopcję i jej etykietę w komponencie Row, aby je pogrupować.

RadioButton obejmuje te kluczowe parametry:

• selected: wskazuje, czy przycisk opcji jest zaznaczony.
• onClick: funkcja lambda, którą aplikacja wykonuje, gdy użytkownik kliknie przycisk opcji. Jeśli ta wartość to null, użytkownik nie może bezpośrednio wchodzić w interakcję z przyciskiem opcji.
• enabled: określa, czy przycisk opcji jest włączony czy wyłączony. Użytkownicy nie mogą wchodzić w interakcję z wyłączonymi opcjami.
• interactionSource: umożliwia obserwowanie stanu interakcji przycisku, np. czy jest on naciśnięty, czy kursor znajduje się nad nim lub czy jest on aktywny.

Tworzenie podstawowego przycisku opcji

Poniższy fragment kodu renderuje listę opcji w elemencie 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

Najważniejsze informacje o kodzie

• radioOptions oznacza etykiety przycisków opcji.
• Funkcja kompozycyjna remember tworzy zmienną stanu selectedOption i funkcję aktualizującą ten stan o nazwie onOptionSelected. Ten stan zawiera wybraną opcję przycisku radiowego.
  • mutableStateOf(radioOptions[0]) inicjuje stan pierwszego elementu na liście. „Połączenia” to pierwszy element, więc jest to domyślnie zaznaczona opcja.
• Modifier.selectableGroup() zapewnia prawidłowe działanie ułatwień dostępu dla czytników ekranu. Informuje system, że elementy w tym elemencie Column należą do grupy, którą można wybrać, co umożliwia prawidłowe działanie czytnika ekranu.
• Modifier.selectable() sprawia, że cały element Row działa jako pojedynczy element, który można wybrać.
  • selected wskazuje, czy bieżący Row jest wybrany na podstawie stanu selectedOption.
  • Funkcja Lambda onClick aktualizuje stan selectedOption do klikniętej opcji, gdy klikniesz Row.
  • role = Role.RadioButton informuje usługi ułatwień dostępu, że Row działa jak przycisk opcji.
• RadioButton(...) tworzy funkcję RadioButton.
  • onClick = null na RadioButton poprawia ułatwienia dostępu. Zapobiega to bezpośredniej obsłudze zdarzenia kliknięcia przez przycisk opcji i umożliwia modyfikatorowi Rowselectable zarządzanie stanem zaznaczenia i zachowaniem związanym z ułatwieniami dostępu.

Wynik

Rysunek 2. Trzy przyciski opcji z wybraną opcją „Znajomi”.

Dodatkowe materiały

• Material Design: przyciski