Jetpack Compose Glimmer 中的垂直堆叠

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

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

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

滚动和定位行为

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

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

焦点管理

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

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

示例：创建垂直堆叠

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

@Composable
fun VerticalStackSample() {
    VerticalStack {
        item {
            Card { Text("Top Card") }
        }
        item {
            Card { Text("Second Card") }
        }
        item {
            Card { Text("Third Card") }
        }
    }
}