Кнопки в Jetpack Compose Glimmer

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

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

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

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

По умолчанию

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

Крупный

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

Анатомия

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

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

Контейнер

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

Label (Звукозаписывающая компания)

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

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

Визуальные индикаторы в начале или конце видео.

Размеры

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

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

Средний

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. Передайте его в composable-функцию 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")
    }
}