Радиокнопка

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

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

Результат

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

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