Przycisk radiowy

Przycisk opcji umożliwia użytkownikowi wybranie opcji z zestawu opcji. Przycisk opcji jest używany, gdy z listy można wybrać tylko jeden element. Jeśli użytkownicy muszą wybrać więcej niż 1 element, użyj przełącznika.

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

Interfejs API

Użyj funkcji kompozycyjnej RadioButton, aby wyświetlić listę dostępnych opcji. Umieść każdą opcję RadioButton i jej etykietę w komponencie Row, aby je zgrupować.

RadioButton zawiera te kluczowe parametry:

• selected: wskazuje, czy opcja jest wybrana.
• 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 interakcje z wyłączonymi opcjami.
• interactionSource: umożliwia obserwowanie stanu interakcji przycisku, np. czy jest naciśnięty, najechany kursorem lub zaznaczony.

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 reprezentuje etykiety opcji.
• Funkcja typu „composable” remember tworzy zmienną stanu selectedOption i funkcję do aktualizowania tego stanu o nazwie onOptionSelected. Ten stan zawiera wybraną opcję przycisku.
  • mutableStateOf(radioOptions[0]) inicjuje stan do pierwszego elementu na liście. „Połączenia” to pierwszy element, więc jest to domyślnie wybrany przycisk.
• Modifier.selectableGroup() zapewnia prawidłowe działanie ułatwień dostępu w przypadku czytników ekranu. Informuje system, że elementy w tym Column są częścią grupy, którą można wybrać, co umożliwia prawidłową obsługę 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 kliknięto Row.
  • role = Role.RadioButton informuje usługi ułatwień dostępu, że Row działa jako przycisk opcji.
• RadioButton(...) tworzy element kompozycyjny RadioButton.
  • onClick = null na urządzeniu RadioButton poprawia ułatwienia dostępu. Zapobiega to bezpośredniej obsłudze zdarzenia kliknięcia przez przycisk opcji i umożliwia modyfikatorowi selectable elementu Row zarządzanie stanem wyboru i zachowaniem ułatwień dostępu.

Wynik

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

Dodatkowe materiały

• Material Design: przyciski