Радиокнопка, Радиокнопка

Радиокнопка позволяет пользователю выбрать вариант из набора параметров. Вы используете переключатель, когда из списка можно выбрать только один элемент. Если пользователям необходимо выбрать более одного элемента, вместо этого используйте переключатель .

Рисунок 1. Пара переключателей с выбранной опцией.

поверхность API

Используйте компонуемый элемент RadioButton для отображения списка доступных опций. Оберните каждый параметр RadioButton и его метку внутри компонента Row , чтобы сгруппировать их вместе.

RadioButton включает в себя следующие ключевые параметры:

• selected : Указывает, выбран ли переключатель.
• onClick : лямбда-функция, которая выполняется при нажатии переключателя. Если это null , пользователь не может напрямую взаимодействовать с переключателем.
• enabled : определяет, включена или отключена кнопка-переключатель. Пользователи не могут взаимодействовать с отключенными переключателями.
• interactionSource : позволяет наблюдать за состоянием взаимодействия кнопки, например, нажата ли она, наведена или находится в фокусе.

Создайте базовый переключатель

Следующий фрагмент кода отображает список переключателей внутри 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

Ключевые моменты о коде

• radioOptions представляет метки для переключателей.
• Компонуемая функция remember создает переменную состояния selectedOption и функцию для обновления этого состояния, называемую onOptionSelected . В этом состоянии сохраняется выбранная опция переключателя.
  • mutableStateOf(radioOptions[0]) инициализирует состояние первого элемента в списке. «Звонки» — это первый элемент, поэтому этот переключатель выбран по умолчанию.
• Modifier.selectableGroup() обеспечивает правильное поведение специальных возможностей для программ чтения с экрана. Он сообщает системе, что элементы в этом Column являются частью выбираемой группы, что обеспечивает правильную поддержку чтения с экрана.
• Modifier.selectable() заставляет всю Row действовать как один выбираемый элемент.
  • selected указывает, выбрана ли текущая Row на основе состояния selectedOption .
  • Лямбда-функция onClick обновляет состояние selectedOption до выбранной опции при щелчке Row .
  • role = Role.RadioButton сообщает службам доступности, что Row функционирует как переключатель.
• RadioButton(...) создает составной элемент RadioButton .
  • onClick = null для RadioButton улучшает доступность. Это не позволяет переключателю напрямую обрабатывать событие щелчка и позволяет модификатору selectable Row управлять состоянием выбора и поведением доступности.

Результат

Рисунок 2. Три переключателя с выбранной опцией «Друзья».

Дополнительные ресурсы

• Материальный дизайн: кнопки