Радиокнопка

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

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

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

Используйте RadioButton composable для перечисления доступных опций. Оберните каждую опцию 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]) инициализирует состояние для первого элемента в списке. «Вызовы» — первый элемент, поэтому это радиокнопка, выбранная по умолчанию.
• Modifier.selectableGroup() обеспечивает правильное поведение доступности для экранных ридеров. Он информирует систему о том, что элементы в этом Column являются частью выбираемой группы, что обеспечивает правильную поддержку экранного ридера.
• Modifier.selectable() заставляет всю Row действовать как один выбираемый элемент.
  • selected указывает, выбрана ли текущая Row на основе состояния selectedOption .
  • Лямбда-функция onClick обновляет состояние selectedOption до выбранного параметра при Row по строке.
  • role = Role.RadioButton информирует службы специальных возможностей о том, что Row функционирует как переключатель.
• RadioButton(...) создает составной элемент RadioButton .
  • onClick = null на RadioButton улучшает доступность. Это не позволяет радиокнопке напрямую обрабатывать событие щелчка и позволяет модификатору selectable Row управлять состоянием выбора и поведением доступности.

Результат

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

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

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