Jetpack Compose Glimmer 中的按钮

适用的 XR 设备

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

了解 XR 设备类型 →

了解 XR 设备类型 →

在 Jetpack Compose Glimmer 中，Button 是一个针对带屏眼镜输入进行了优化的互动式组件，可通过其状态提供清晰的视觉反馈，以引导用户操作。

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

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

默认

大

解剖学

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

尺寸

Jetpack Compose 微光按钮支持两种尺寸变体。这些设置会影响最小高度和内部内边距。

状态

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)
}
ButtonSamples.kt

按钮组

借助 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") }
}
ButtonSamples.kt

按钮组中的焦点控制

您可以将焦点移至组中的任何按钮，以手动控制选择。

使用 ButtonGroup 状态自定义和控制滚动行为：

1. 使用 rememberButtonGroupState 声明状态。
2. 将其传递给 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")
    }
}
ButtonSamples.kt

自定义焦点颜色以表达品牌

在 Jetpack Compose Glimmer 中，组件专为透明显示屏而设计和优化，因此它们主要依靠细微的半透明表面和高对比度边框，以确保在现实世界中具有良好的易读性和视觉舒适度。由于静止状态更倾向于使用中性色调，以避免视觉疲劳和阻碍用户的视野范围，因此 Button 上的 focusedColor 参数提供了表达应用品牌的主要功能。

这种功能可让品牌的强调色成为系统活跃互动状态的动态部分，而不是用饱和色为闲置按钮着色，因为这可能会影响光学透视环境中的透明度和对比度。 获得焦点时，按钮会将其背景提升到此品牌色调，并使用 calculateContentColor(focusedColor) 自动重新计算内容对比度，从而实现清晰的互动反馈，同时保留显示眼镜所需的约束和光学人体工程学。

以下示例展示了如何使用品牌颜色替换默认 focusedColor：

Button(
    onClick = {},
    focusedColor = brandColor,
) {
    Text("Focus Color Button")
}
ButtonSamples.kt