Jetpack Compose Glimmer 中的按钮

适用的 XR 设备

本指南可帮助您为以下类型的 XR 设备打造优质体验。

了解 XR 设备类型 →

了解 XR 设备类型 →

在 Jetpack Compose Glimmer 中，Button 是一种互动式组件，经过优化可用于显示眼镜输入，并通过其状态提供清晰的视觉反馈来引导用户操作。

按钮基于 Jetpack Compose Glimmer 表面系统构建，该系统可自动处理边框和深度等物理属性。

标准按钮包含一个文本标签和可选图标。您可以将其用于主要操作或次要操作。此外，还有一些专用按钮，例如图标按钮和切换按钮，这些按钮在 Jetpack Compose Glimmer 中被定义为单独的组件。

默认

大

解剖学

按钮由容器和标签组成，并可选择性地添加前导和后随图标。

尺寸

Jetpack Compose Glimmer 按钮支持两种尺寸变体。这些属性会影响最小高度和内部边衬区。

状态

Jetpack Compose Glimmer 中的按钮会更改其外观来传达其状态。

• 已启用：互动式按钮的默认状态。
• 聚焦：聚焦时，按钮会应用 GlimmerTheme.depthEffectLevels.level1 和聚焦边框突出显示效果。
• 按下：启用后，系统会在表面上应用半透明的白色叠加层。
• 已停用：按钮不响应输入，并且其视觉外观会进行调整。

按钮默认设置

以下默认设置适用于标准按钮：

• 默认情况下，按钮使用 GlimmerTheme.typography.bodySmall。确保按钮中的文字简洁明了，能够清楚地描述相应操作。
• 按钮的默认形状为 GlimmerTheme.shapes.large。这种一致的圆角有助于用户在显示眼镜界面中识别按钮。

示例：带文字的按钮

以下代码创建了一个带有文字的标准按钮：

@Composable
fun ButtonSample() {
    Button(onClick = {}) { Text("Send") }
}
ButtonSamples.kt

示例：带有前导和后导图标的按钮

您还可以使用 leadingIcon 在文本开头或使用 trailingIcon 在文本末尾添加图标，以提供更多背景信息。

以下代码创建了一个带有前导图标的按钮：

@Composable
fun ButtonWithLeadingIconSample() {
    Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("Send")
    }
}
ButtonSamples.kt