Jetpack Compose Glimmer 中的焦点

适用的 XR 设备

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

了解 XR 设备类型 →

AI 眼镜

了解 XR 设备类型 →

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

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

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

（临时要求）启用必需输入标志：

借助 Jetpack Compose 的一项功能，系统可以在屏幕加载时自动将初始焦点设置到第一个可聚焦元素，该元素通常是屏幕左上角的项。此功能仍在开发中，默认处于未启用状态。如需启用此功能，请在 activity 的 onCreate() 方法中将 isInitialFocusOnFocusableAvailable 标志设置为 true。

class GlassesActivityExample : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        @OptIn(ExperimentalComposeUiApi::class)
        ComposeUiFlags.isInitialFocusOnFocusableAvailable = true
        super.onCreate(savedInstanceState)
    }
}

导航行为和顺序

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

聚焦移动

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

焦点顺序

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

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

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

滚动容器

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

默认焦点状态

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

图 1. Jetpack Compose Glimmer 中的三种焦点状态，通过基于轮廓的视觉反馈来区分。

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

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

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