Кнопки в Jetpack Compose Glimmer

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

В Jetpack Compose Glimmer Button представляет собой интерактивный компонент, оптимизированный для ввода с помощью очков с дисплеем, обеспечивающий четкую визуальную обратную связь через свои состояния, чтобы направлять действия пользователя.

Кнопки созданы на основе системы поверхностей Jetpack Compose Glimmer, которая автоматически обрабатывает физические свойства, такие как границы и глубина.

Стандартная кнопка содержит текстовую метку и дополнительные значки. Ее можно использовать для основных или второстепенных действий. Также существуют специализированные кнопки, такие как кнопки со значками и кнопки-переключатели , которые определены как отдельные компоненты в Jetpack Compose Glimmer.

По умолчанию

Пример нескольких разных стилей кнопок в Jetpack Compose Glimmer. На этих примерах показаны стандартные кнопки среднего размера с тремя состояниями: Включено (1), В фокусе (2) и Нажато (3).

Большой

Пример нескольких разных стилей кнопок в Jetpack Compose Glimmer. На этих примерах показаны кнопки большого размера с тремя состояниями: Включено (1), В фокусе (2) и Нажато (3).

Анатомия

Кнопка состоит из контейнера и метки, с дополнительными значками в начале и конце.

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

Контейнер

Фоновая поверхность кнопки.

Этикетка

Текст, описывающий действие.

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

Опережающие или замыкающие визуальные индикаторы.

Размеры

Кнопки Jetpack Compose Glimmer поддерживают два варианта размера. Они влияют на минимальную высоту и внутренний отступ.

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

Середина

48.dp

Стандартные действия и списки (по умолчанию).

Большой

72.dp

Действия, на которые делается сильный акцент, или основные точки входа на экран.

Штаты

Кнопки в Jetpack Compose Glimmer меняют свой внешний вид, чтобы сообщить о своем состоянии.

  • Включено : состояние по умолчанию для интерактивной кнопки.
  • В режиме фокусировки : При фокусировке кнопка применяет эффект GlimmerTheme.depthEffectLevels.level1 и подсветку границы в режиме фокусировки.
  • При нажатии : После активации на поверхность наносится полупрозрачное белое покрытие.
  • Отключено : кнопка не реагирует на ввод, и её внешний вид изменён.

Настройки кнопок по умолчанию

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

  • По умолчанию кнопки используют свойство GlimmerTheme.typography.bodySmall . Убедитесь, что текст внутри кнопок лаконичен и четко описывает действие.
  • Форма кнопки по умолчанию — GlimmerTheme.shapes.large . Такое единообразное закругление помогает пользователям различать кнопки на разных экранах очков.

Пример: Кнопка с текстом

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

@Composable
fun ButtonSample() {
    Button(onClick = {}) { Text("Send") }
}

Пример: Кнопки с иконками в начале и конце текста.

Также можно добавить значки в начало (используя leadingIcon ) или конец (используя trailingIcon ) текста для предоставления дополнительного контекста.

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

@Composable
fun ButtonWithLeadingIconSample() {
    Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("Send")
    }
}