Jetpack Compose Glimmer 中的列表

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

在 Jetpack Compose Glimmer 中，GlimmerLazyColumn 的工作方式与 Compose LazyColumn 类似，仅用于编写和布局可见项，以保持高性能。不过，Glimmer 延迟加载列是为显示眼镜控件而构建的，用户通过触控板（而非触摸屏）进行互动。移动设备用户可以随时点按屏幕上的任何坐标，而使用显示眼镜的用户只能与获得焦点的项目互动。

图 1. Jetpack Compose Glimmer 中一些不同样式的列表示例。

焦点行为和子级项目

Glimmer 延迟列会自动处理基于焦点的导航。与移动设备列表（焦点和滚动通常是分开的）不同，Glimmer 延迟列通过在用户使用触控板滚动时在子项之间移动焦点来协调这两者。列表本身不可聚焦，因此它会管理并请求其子项的焦点，以便用户在滚动时有明确的互动点。

由于没有直接的触控输入，请使 Glimmer 延迟列中的所有子项都可聚焦。当项获得焦点时，还应提供视觉响应，例如活动边框或突出显示。虽然用户仍然可以滚动浏览不可聚焦的项，但无法与之互动。请尽可能使用 ListItem 或 Card 等内置组件，因为这些组件已可聚焦，并可针对聚焦状态提供视觉反馈。

示例：包含多个项的 Glimmer 延迟加载列

以下代码展示了如何使用 Glimmer 延迟列以及 item 和 items DSL 方法来创建商品列表：

@Composable
fun GlimmerLazyColumnSample() {
    GlimmerLazyColumn {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}

示例：具有标题 slot 的 Glimmer 延迟加载列

Jetpack Compose Glimmer 还提供了包含标题 slot 的 GlimmerLazyColumn 的重载。不可聚焦的标题（通常为 TitleChip）保持静态，位于顶部中央，而列表内容在其下方滚动。

以下代码创建了一个带有标题 slot 的 Glimmer 延迟加载列：

@Composable
fun GlimmerLazyColumnWithTitleChipSample() {
    val ingredientItems =
        listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon")
    GlimmerLazyColumn(title = { TitleChip { Text("Ingredients") } }) {
        items(ingredientItems) { text -> ListItem { Text(text) } }
    }
}

使用 Glimmer 延迟列表状态进行程序化列表操作

如需控制和观察列表状态的不同方面（例如使用 firstVisibleItemIndex 和 firstVisibleItemScrollOffset 属性控制其滚动位置），请使用 GlimmerLazyListState。

您可以使用 rememberGlimmerLazyListState 提升此状态，以便使用 scrollToItem 和 animateScrollToItem 以编程方式滚动。