Радиокнопка

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

Рисунок 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 composable создает переменную состояния selectedOption и функцию для обновления этого состояния, называемую onOptionSelected . Это состояние содержит выбранный вариант переключателя.
  • mutableStateOf(radioOptions[0]) инициализирует состояние первым элементом списка. "Calls" — первый элемент, поэтому по умолчанию выбран соответствующий переключатель.
• Modifier.selectableGroup() обеспечивает корректное поведение для программ чтения с экрана. Он сообщает системе, что элементы в этом Column являются частью выбираемой группы, что обеспечивает надлежащую поддержку программ чтения с экрана.
• Modifier.selectable() превращает всю Row в единый выбираемый элемент.
  • selected указывает, выбрана ли текущая Row в соответствии с состоянием selectedOption .
  • Функция onClick режиме лямбда обновляет состояние selectedOption до значения выбранного параметра при щелчке по Row .
  • role = Role.RadioButton сообщает службам доступности, что Row функционирует как переключатель.
• RadioButton(...) создает составной объект RadioButton .
  • onClick = null для RadioButton улучшает доступность. Это предотвращает прямую обработку события клика самой радиокнопкой и позволяет модификатору selectable элемента Row управлять состоянием выбора и поведением доступности.

Результат

Рисунок 2. Три радиокнопки с выбранным вариантом «Друзья».

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

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