Przycisk radiowy

Przycisk opcji umożliwia użytkownikowi wybranie jednej z kilku opcji. 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.

2 przyciski opcji bez etykiet. Wybrany jest przycisk po lewej stronie, a kółko jest wypełnione, co oznacza, że jest zaznaczone. Prawy przycisk nie jest wypełniony
Rysunek 1. Para przycisków z jedną wybraną 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 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 z przyciskiem, 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 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)
                )
            }
        }
    }
}

Najważniejsze informacje o kodzie

  • radioOptions – etykiety przycisków opcji.
  • Funkcja typu „composable” 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 zaznaczony przycisk.
  • Modifier.selectableGroup() zapewnia prawidłowe działanie ułatwień dostępu w przypadku czytników ekranu. Informuje to 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 jak 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

Lista 3 przycisków opcji o nazwach Połączenia, Nieodebrane i Znajomi. Wybrano przycisk Znajomi.
Rysunek 2. Trzy przyciski opcji, z których wybrana jest opcja „Znajomi”.

Dodatkowe materiały