Jetpack Compose Glimmer 中的图标按钮

适用的 XR 设备
本指南可帮助您为以下类型的 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 = {}) { Icon(FavoriteIcon, "Localized description") }
}