Jetpack Compose Glimmer 中的焦点

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

所有 Jetpack Compose Glimmer 组件都旨在与标准输入法(例如点按或滑动眼镜的触控板)搭配使用,同时也能接受特定于显示型眼镜硬件的较低级别输入命令。Jetpack Compose Glimmer 组件会自动处理必要的输入事件。

对于滚动和拖动等标准操作,请使用 Jetpack Compose Glimmer 组件来提供一致的体验。不过,对于自定义组件或 定制的互动行为,您可以使用现有的 Compose API,例如 Modifier.draggableModifier.scrollable

指针输入和焦点

在显示型眼镜上,指针输入可能会影响焦点:

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

焦点移动和顺序会随着用户在应用中导航而发生变化。

焦点移动

在可滚动的容器中,焦点会随着触控板上的滑动而持续移动。对于离散元素(例如一行按钮),每次滑动都会使焦点一次移动一个元素。

焦点顺序

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

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

Modifier.focusProperties {
    onEnter = {
        initialFocus.requestFocus()
        // Prevent focus from exiting the group
        cancelFocusChange()
    }
}
.focusGroup()

滚动容器

为了获得最佳用户体验,列表等滚动容器应是屏幕上唯一的主要组件。避免将可滚动的列表直接放置在其他互动元素(例如按钮)的上方或下方,以防止导航混乱并促进平稳、可预测的焦点移动。

默认焦点状态

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

图 1.Jetpack Compose Glimmer 中的三种焦点状态,它们使用基于轮廓的视觉反馈进行区分。
  • 默认:按钮的背景颜色派生自 GlimmerTheme.colors.surface,其主要内容会计算该界面的内容 颜色。

  • 已聚焦:边框宽度会增加,以表示焦点。

  • 已聚焦 + 已按下:背景设置为 GlimmerTheme.colors.surface,不透明度增加,以表示其 已选定状态。