Кнопки переключения в Jetpack Compose Glimmer

Применимые устройства XR
Данное руководство поможет вам создавать приложения для устройств XR такого типа.
Узнайте о типах устройств XR →
Очки для демонстрации
Узнайте о типах устройств XR →

В Jetpack Compose Glimmer ToggleButton — это интерактивный компонент, который меняет свой внешний вид в зависимости от состояния флажка. Кнопки-переключатели оптимизированы для экранных очков, обеспечивая четкие визуальные переходы формы и цвета. Эти переходы указывают на то, когда действие или настройка активны.

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

Для других вариантов использования также доступны стандартные кнопки и кнопки с иконками .

Рисунок 1. Пример переключателя в Jetpack Compose Glimmer, используемого для воспроизведения и паузы в пользовательском интерфейсе.

Анатомия

Кнопка-переключатель состоит из контейнера, который трансформируется между состояниями, и метки с дополнительными значками.

Часть Описание

Контейнер

Анимирует переход от круглой формы (не отмечено) к закругленному прямоугольнику (отмечено).

Этикетка

Как правило, это Text компонент.

Значки (необязательно)

Ведущие или ведомые позиции, которые могут различаться в зависимости от штата.

Размеры

Подобно стандартным кнопкам , переключатели поддерживают два варианта размера:

Размер Минимальная высота Использование по умолчанию

Середина

48.dp

Размер интерактивного интерфейса по умолчанию.

Большой

72.dp

Переключатели «Основной» или «Высокозначный».

Кнопка переключения по умолчанию

По умолчанию кнопки-переключатели используют ToggleButtonDefaults.animateShape . Это обеспечивает плавный переход между следующими состояниями:

Класс ToggleButtonColors управляет разрешением цвета для следующих состояний:

Анимация

Для кнопок-переключателей по умолчанию используются следующие параметры анимации:

  • animateShape : Предоставляет Shape , который интерполирует размеры углов, используя спецификацию пружинной анимации ( stiffness = 600f ).
  • colors : Фабричная функция для настройки цветов фона и содержимого для обоих состояний.
  • CheckedShape : Статический объект RoundedCornerShape(20.dp) используемый для состояния "отмечен".
  • contentPadding : Наследует от ButtonDefaults.contentPadding .

Пример: Кнопка переключения

Следующий код создает простую кнопку-переключатель: 

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(checked = checked, onCheckedChange = { checked = it }) { Text(text) }
}

Пример: Кнопка-переключатель с иконкой в ​​начале.

Следующий код создает кнопку-переключатель с иконкой, расположенной перед ней: 

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
        },
        onCheckedChange = { checked = it },
    ) {
        Text(text)
    }
}