Кнопки со значками в Jetpack Compose Glimmer

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

В Jetpack Compose Glimmer IconButton – это компактный интерактивный компонент, который позволяет выполнять дополнительные действия одним нажатием.

Кнопки-значки меньше стандартных кнопок, но у них есть физические границы, чтобы с ними было удобно взаимодействовать на дисплее очков.

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

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

Размеры и параметры

Элемент Параметр

Минимальный размер контейнера

48 x 48 dp

Внутренний размер значка

32 x 32 dp

Отступ контента по умолчанию

GlimmerTheme.componentSpacingValues.small

Штаты

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

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

Значок кнопки по умолчанию

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

  • Форма. По умолчанию выбрана форма GlimmerTheme.shapes.large (обычно круглая).
  • Цвет: по умолчанию GlimmerTheme.colors.surface.
  • Цвет контента: автоматически рассчитывается на основе цвета фона, если не задан явно.
  • Внутренние отступы – расстояние между значком и краем контейнера по умолчанию.
  • Минимальный размер – фиксированное значение 48.dp, чтобы кнопки не становились слишком маленькими.
  • Размер значков – по умолчанию GlimmerTheme.iconSizes.small (32.dp).

Пример: кнопка со значком

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

@Composable
fun IconButtonSample() {
    IconButton(onClick = { /* Handle action */ }) {
        Icon(FavoriteIcon, contentDescription = "Localized description")
    }
}