Jetpack Compose Glimmer 中的列表

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

在 Jetpack Compose Glimmer 中，VerticalList 的工作方式与 Compose LazyColumn 类似，仅对可见项进行组合和布局，以保持 高性能。不过，对于 Jetpack Compose Glimmer，垂直列表是为显示眼镜控件而构建的，用户使用触控板而非触摸屏进行互动。移动设备用户可以随时点按屏幕上的任何坐标，而使用显示眼镜的用户只能与具有焦点的项互动。

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

焦点行为和子项

垂直列表经过优化，可自动处理基于焦点的导航。与移动设备的列表（焦点和滚动通常是分开的）不同，垂直列表通过在用户使用触控板滚动时移动焦点来协调这两者。列表本身不可聚焦，因此它会为其子项管理和请求焦点，以便用户在滚动时有一个清晰的互动点。

由于没有直接触控输入，因此请将您放置在垂直列表中的所有子项都设为可聚焦，并在项具有焦点时提供视觉响应，例如活动边框或突出显示。虽然用户仍然可以滚动浏览不可聚焦的项，但无法与这些项互动。请尽可能在垂直列表中使用内置组件（如 ListItem或Card），因为 这些组件已可聚焦，并为焦点状态提供视觉反馈。

示例：包含多个项的垂直列表

以下代码展示了如何使用带有项和项 DSL 方法的垂直列表来创建项列表：

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

示例：带有标题槽的垂直列表

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

以下代码用于创建带有标题槽的垂直列表：

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

使用列表状态进行以编程方式执行的列表操作

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

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