Jetpack Compose Glimmer 中的横向页面控制项

适用的 XR 设备

本指南可帮助您为以下类型的 XR 设备打造优质体验。

显示眼镜

在 Jetpack Compose Glimmer 中，GlimmerHorizontalPager 是一种延迟组合的水平可滚动布局，可按顺序排列其页面。它与 Compose Foundation 中的标准 HorizontalPager 类似，但专为具有 Glimmer 行为和默认值的带屏眼镜而定制。

默认情况下，一次只会突出显示一个页面。为了提供精致的体验，分页器使用吸附动画来确保在用户的滚动操作结束后，页面始终会准确地停留在视口边界内。

关键参数和布局选项

GlimmerHorizontalPager 提供可自定义的参数来控制间距、布局对齐方式和延迟加载。其中一些参数包括：

参数	说明
`state`	一个 `GlimmerPagerState` 对象，用于管理、观察和以编程方式控制分页器的滚动位置和活动页面。
`contentPadding`	剪辑后应用于整体内容边界的内边距，可用于在第一页之前或最后一页之后添加前导或尾部边缘内边距。
`pageSpacing`	分页器中各个页面之间的水平间距。
`pageIndicator`	用于呈现活动页面指示器的可组合项槽。默认值为 `GlimmerHorizontalPagerDefaults.PageIndicator(state)`。
`beyondViewportPageCount`	要组合和布局超出可见视口的页面数量，作为预加载优化。避免设置较大的值，以保持延迟组合效率。

如需了解所有可用参数，请参阅完整参考文档。

动画文本运动建议

在显示眼镜上进行分页器吸附动画和过渡期间，默认文本呈现可能会显示像素吸附伪影。设置 TextMotion.Animated 可确保在整个布局动画中平滑呈现：

Text(
    text = "Page: $page",
    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
)GlimmerHorizontalPagerSample.kt

示例：水平分页器

以下代码演示了如何创建包含 10 个页面的基本水平分页器，并在每个页面中放置一个卡片：

// Hoist the pager state, specifying the total page count with a lambda.
val pagerState = rememberGlimmerPagerState(pageCount = { 10 })

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
) { page ->
    // Use Glimmer components like Card and Text for optimized glasses styling.
    Card(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Page: $page",
            // Recommended: use TextMotion.Animated for smooth transitions in a pager.
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
}GlimmerHorizontalPagerSample.kt

代码要点

状态：使用 rememberGlimmerPagerState(pageCount = { 10 })初始化GlimmerPagerState，以管理分页器的状态。
页面槽内容：接收页面索引 page，以呈现每个卡片。GlimmerPagerScope
平滑动画文本样式：复制 LocalTextStyle.current 并明确启用 TextMotion.Animated。
自动页面指示器：与需要外部指示器组件的标准 Compose 分页器不同，GlimmerHorizontalPager 默认会自动嵌入点样式页面指示器。

页面指示器

默认情况下，GlimmerHorizontalPager 使用 GlimmerHorizontalPagerDefaults.PageIndicator呈现基于点的页面指示器。指示器会自动调整其配色方案：

活动点使用从最近的周围 surface解析的内容颜色。

您可以传递自定义的 PageIndicator 来指定明确的颜色，或将点替换为您自己的自定义布局：

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
    // Use a page numbers instead of the default dot-indicator
    pageIndicator = {
        Text(
            text = "${pagerState.currentPage + 1} / ${pagerState.pageCount}",
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
)GlimmerHorizontalPagerSample.kt