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

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

API surface

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

Результат

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

• Material Design: кнопки