Кнопки в 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 . Такое единообразное закругление помогает пользователям различать кнопки на разных экранах очков.

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

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

Следующий код создает кнопку с иконкой как в начале, так и в конце текста: 

Button(
    onClick = { /* Handle navigation or action */ },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = null) },
    trailingIcon = { Icon(SendIcon, contentDescription = null) }
) {
    Text("Text Label", style = GlimmerTheme.typography.titleSmall)
}

Группы кнопок

Компонент ButtonGroup позволяет группировать кнопки в прокручиваемый ряд, который выступает в качестве контроллера фокуса. По мере прокрутки пользователем фокус автоматически перемещается, чтобы выделить кнопку, соответствующую текущей позиции прокрутки.

Пример функций прокрутки и фокусировки группы кнопок.

Пример: Группы кнопок 

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}

Управление фокусировкой в ​​группах кнопок

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

Настраивайте и контролируйте поведение прокрутки с помощью состояния ButtonGroup :

  1. Объявите состояние с помощью rememberButtonGroupState .
  2. Передайте это в составной объект ButtonGroup .
  3. Вызовите animateScrollToItem (или scrollToItem для мгновенной прокрутки), чтобы прокрутить страницу до определенного элемента и автоматически переместить на него фокус.

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

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}