Jetpack Compose Glimmer 中的焦点

适用的 XR 设备

本指南可帮助您为这些类型的 XR 设备打造体验。

了解 XR 设备类型 →

了解 XR 设备类型 →

所有 Jetpack Compose Glimmer 组件都旨在与标准输入方法（例如在 AI 眼镜的触控板上点按或滑动）搭配使用，同时也能接收特定于 AI 眼镜硬件的低级输入命令。Jetpack Compose Glimmer 组件会自动处理必要的输入事件。对于自定义组件，您可以利用 Modifier.draggable 或 Modifier.scrollable 等现有 Compose API 来实现特定的互动行为。

在配备显示屏的 AI 眼镜上，指针输入可能会影响对焦：

• 点按：用于激活元素的直接互动。当用户与某个元素互动时，焦点会移至该元素。
• 滑动：用于导航和滚动。未处理的滑动操作会自动转换为焦点移动，从而无需直接输入指针即可实现顺畅的界面导航。

导航行为和顺序

在用户浏览应用时，关注焦点移动和顺序变化。

聚焦移动

在可滚动容器中，焦点会随着触控板上的滑动操作持续移动。对于按钮行等离散元素，每次滑动都会将焦点移动到下一个元素。

焦点顺序

与 Jetpack Compose 中一样，Jetpack Compose Glimmer 也使用一维焦点搜索。如需详细了解焦点遍历顺序，请参阅更改焦点遍历顺序。

如需更改初始聚焦的项目，您可以添加顶级 Modifier.focusGroup() 并指定自定义 onEnter focusProperty：

Modifier.focusProperties {
    onEnter = {
        initialFocus.requestFocus()
        cancelFocusChange()
    }
}
.focusGroup()

滚动容器

为了获得最佳用户体验，列表等滚动容器应是屏幕上唯一的主要组件。避免将可滚动列表直接放置在按钮等其他互动元素的上方或下方，以防止导航混乱，并确保焦点移动顺畅且可预测。

默认焦点状态

Jetpack Compose Glimmer 在其可互动组件（包括界面、卡片和列表项）中实现了默认焦点状态，可在用户互动期间提供一致且清晰的视觉反馈。

• 默认：按钮的背景颜色源自 GlimmerTheme.colors.surface，其主要内容会计算相应界面的内容颜色，而图标为 GlimmerTheme.colors.primary。

• 聚焦：边框宽度会增加，以表示聚焦。

• 聚焦 + 按下：背景设置为 GlimmerTheme.colors.surface，不透明度为 100%，以表示其处于选中状态。