Jetpack Compose Glimmer 中的垂直堆叠

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

在 Jetpack Compose Glimmer 中，VerticalStack 是一种延迟加载的垂直 滚动布局，可按视觉上重叠的 三维序列排列项。主要项会突出显示在前台，而后续项则位于其后。

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

滚动和定位行为

由于堆叠会使项保持紧凑的重叠布局，因此它们有一些行为与其他类型的序列组件（例如列表）不同：

  • 当用户垂直滚动时，活跃的前台项会移出视图，从而使紧随其后的项滑入突出的前台位置。
  • 在用户手势结束后，项始终使用专门的弹簧动画以捕捉动画方式进入前台位置。
  • 项沿 z 轴定位，列表中的项越靠后，放置位置就越靠后。

焦点管理

VerticalStack 使用专门的焦点系统，以确保当前前台项始终是用户互动的主要目标：

  • 初始焦点和重新进入：初始焦点和焦点重新进入会转到堆栈的 当前顶部项。
  • 自动对焦通知：当项转换时，堆栈会为顶部项请求焦点。
  • 焦点跟踪：每个项都使用 onFocusChanged 向 StackState 通知其各自的焦点状态。

示例：创建垂直堆叠

以下代码会创建一个包含多个项的垂直堆叠：

@Composable
fun VerticalStackSample() {
    VerticalStack(modifier = Modifier.fillMaxWidth().height(364.dp)) {
        item(key = 0) {
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-0",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
        items(count = 10, key = { it + 1 }) { index ->
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-${index + 1}",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
    }
}

代码要点

  • 将文本的 LocalTextStyle 的 textMotion 设置为 Animated。这有助于在布局动画或缩放转换期间实现平滑的文本渲染，以防止出现像素捕捉伪影。
  • 为垂直堆叠的高度提供 364.dp 的特定大小。请始终提供特定高度、使用高度修饰符或应用 fillMaxSize修饰符来定义卡片转换的视觉区域。
  • 与其他直接采用 shape 参数的组件不同， VerticalStack 使用 itemDecoration 修饰符管理其项的视觉边界。此示例为初始项的 itemDecoration 传递与所有子项相同的 shape，以保持一致的剪辑和视觉效果。此示例使用默认的 CardDefaults.shape。