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