本頁面由 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