Кнопки-иконки в Jetpack Compose Glimmer

Применимые устройства XR

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

Очки для демонстрации

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

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

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

Размеры и габариты

Элемент	Измерение
Минимальный размер контейнера	48 x 48 dp
Внутренний размер значка	32 x 32 дп
Отступы содержимого по умолчанию	`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 = {}) { Icon(FavoriteIcon, "Localized description") }
}IconButtonSamples.kt