Jetpack Compose Glimmer 中的列表

适用的 XR 设备

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

了解 XR 设备类型 →

AI 眼镜

了解 XR 设备类型 →

在 Jetpack Compose Glimmer 中，列表是垂直可滚动的界面组件，可高效地仅渲染可见项，旨在为 AI 眼镜应用提供特定的行为和输入兼容性。Jetpack Compose Glimmer 使用 VerticalList 和 ListItem 组件来实现此效果。

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

VerticalList 是 Jetpack Compose Glimmer 的组件，用于显示可滚动的垂直内容。它提供的 API 功能与 LazyColumn 相同，但行为专门针对 Jetpack Compose Glimmer 和带显示屏的 AI 眼镜进行了优化。

警告： 请勿在 AI 眼镜 activity 中使用 LazyColumn。

Jetpack Compose Glimmer 列表有一些独特的限制：

• 列表在视图中应仅显示三项或更少项。
• 当列表包含的项数超过视图可容纳的项数时，会在列表边界附近使用黑色幕布。

示例：显示包含三项的垂直列表

以下代码展示了如何使用 VerticalList 和 ListItem 组件创建包含三项的列表：

@Composable
fun GlimmerListWithButtons() {
    VerticalList(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        items(count = 3) { index ->
            ListItem(
                onClick = { /* Handle Click */ },
                leadingIcon = if (index == 1) {
                    { Icon(Icons.Rounded.Favorite, "Favorite Icon") }
                } else null
            ) {
                Text("List Item + $index")
            }
        }
    }
}

代码要点

• 该列表显示了三个动态生成的项，每个项都是一个 ListItem。
• 您可以自定义每个 ListItem，并为其添加图标。