此页面由 Cloud Translation API 翻译。

添加自定义页面指示器

借助页面指示器，您可以帮助用户了解自己在应用内容中的当前位置，以直观的方式显示进度。当您按顺序呈现内容（例如轮播界面、图片库和幻灯片，或列表中的分页）时，这些导航提示会很有用。

版本兼容性

此实现要求将项目 minSDK 设置为 API 级别 21 或更高级别。

依赖项

创建带有自定义页面指示器的横向页面浏览器

以下代码会创建一个带有页面指示器的水平页面浏览器，以便向用户提供有关有多少页面以及当前可见的页面的直观提示：

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize()
) { page ->
    // Our page content
    Text(
        text = "Page: $page",
    )
}
Row(
    Modifier
        .wrapContentHeight()
        .fillMaxWidth()
        .align(Alignment.BottomCenter)
        .padding(bottom = 8.dp),
    horizontalArrangement = Arrangement.Center
) {
    repeat(pagerState.pageCount) { iteration ->
        val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray
        Box(
            modifier = Modifier
                .padding(2.dp)
                .clip(CircleShape)
                .background(color)
                .size(16.dp)
        )
    }
}PagerSnippets.kt