Przycisk radiowy

Przycisk opcji pozwala użytkownikowi wybrać jedną opcję z wielu dostępnych. Używaj przycisku opcji, gdy na liście można wybrać tylko 1 element. Jeśli użytkownicy muszą wybrać więcej niż 1 element, użyj zamiast tego przełącznika.

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

Interfejs API

Użyj elementu kompozycyjnego RadioButton, aby wyświetlić dostępne opcje. Zawartość każdej opcji RadioButton i jej etykiety umieść w komponencie Row, aby je pogrupować.

RadioButton zawiera te kluczowe parametry:

• selected: wskazuje, czy przycisk opcji jest zaznaczony.
• onClick: funkcja Lambda, która jest wykonywana po kliknięciu opcji. Jeśli jest 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 nieaktywnymi opcjami.
• interactionSource: umożliwia obserwowanie stanu interakcji z przyciskiem, np. czy jest on wciśnięty, czy na nim jest nałożony kursor lub czy jest na nim skupiona uwaga.

Tworzenie podstawowego przycisku opcji

Poniższy fragment kodu renderuje listę przycisków radiowych w elementach 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 kompozytowa remember tworzy zmienną stanu selectedOption oraz funkcję do aktualizowania tego stanu o nazwie onOptionSelected. Ten stan przechowuje aktualnie wybraną opcję przycisku opcji.
  • mutableStateOf(radioOptions[0]) inicjuje stan do pierwszego elementu na liście. „Połączenia” to pierwszy element, więc domyślnie jest zaznaczony.
• Modifier.selectableGroup() zapewnia odpowiednie zachowanie funkcji ułatwień dla czytników ekranu. Informuje system, że elementy w tym elemencie Column są częścią grupy do wyboru, co umożliwia prawidłowe działanie czytnika ekranu.
• Modifier.selectable() sprawia, że cały element Row działa jak jeden element, który można wybrać.
  • selected wskazuje, czy bieżący element Row jest wybrany na podstawie stanu elementu selectedOption.
  • Funkcja lambda onClick aktualizuje stan selectedOption do wybranej opcji, gdy użytkownik kliknie Row.
  • role = Role.RadioButton informuje usługi ułatwień dostępu, że element Row działa jak przycisk opcji.
• RadioButton(...) tworzy kompozyt RadioButton.
  • onClick = null na RadioButton poprawia ułatwienia dostępu. Zapobiega to bezpośredniemu obsłudze zdarzenia kliknięcia przez przycisk opcji, a zamiast tego pozwala modyfikatorowi Row selectable zarządzać stanem wyboru i zachowaniami ułatwień dostępu.

Wynik

Rysunek 2. 3 opcje z zaznaczoną opcją „Znajomi”.

Dodatkowe materiały

• Material Design: przyciski