Переключатель

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

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

Используйте composable-функцию 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.
  • Функция Lambda onClick обновляет состояние selectedOption до выбранного варианта, когда пользователь нажимает на Row.
  • role = Role.RadioButton сообщает сервисам специальных возможностей, что Row работает как переключатель.
• RadioButton(...) создает компонуемый элемент RadioButton.
  • onClick = null на RadioButton улучшает доступность. Это предотвращает обработку события клика непосредственно переключателем и позволяет модификатору Rowselectable управлять состоянием выбора и поведением доступности.

Результат

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

• Material Design: кнопки