Jetpack Compose Glimmer 中的按钮

适用的 XR 设备
本指南可帮助您为以下类型的 XR 设备打造优质体验。
了解 XR 设备类型 →
展示眼镜
了解 XR 设备类型 →

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

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

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

默认

Jetpack Compose Glimmer 中一些不同样式的按钮示例。这些示例展示了默认大小的中等尺寸按钮，其中包含三种按钮状态：启用 (1)、聚焦 (2) 和按下 (3)。

大

Jetpack Compose Glimmer 中一些不同样式的按钮示例。这些示例展示了具有三种按钮状态（已启用 [1]、已聚焦 [2] 和已按下 [3]）的大尺寸按钮。

解剖学

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

部分 说明

容器

按钮的背景表面。

标签

描述操作的文本。

图标（可选）

前导或后导视觉指示器。

尺寸

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

大小 最小高度 默认使用政策

中

48.dp

标准操作和列表（默认）。

大

72.dp

高强调度操作或主要界面入口点。

状态

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

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

按钮默认设置

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

示例：带有文字和图标的按钮

基本按钮仅包含文本标签，但您也可以在文本的开头（使用 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)
}

按钮组

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

按钮组中的焦点控制

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

使用 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")
    }
}