Przycisk radiowy

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

Dwa przyciski radiowe 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 opcji z wybraną jedną opcją.

Powierzchnia interfejsu API

Użyj elementu kompozycyjnego 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 z przyciskiem, np. czy jest on naciśnięty, czy kursor znajduje się nad nim lub czy jest on aktywny.

Tworzenie podstawowego przycisku opcji

Ten 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)
                )
            }
        }
    }
}

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 funkcji 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 dostępność. 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 wybraną opcją „Znajomi”.

Dodatkowe materiały