ViewPager的Jetpack Compose替代方案

2023-10-04 18:59:04

Pager 的用法

使用 Pager 组件非常简单，你只需要创建一个 PagerState 对象，然后将它传递给 Pager 组件即可。PagerState 对象保存了当前页面的索引，以及页面滑动方向等信息。

val pagerState = rememberPagerState()

Pager(
    state = pagerState,
    vertical = false, // 是否是竖直滑动
    contentPadding = PaddingValues(16.dp) // Pager 的内边距
) {
    // 添加你的页面内容
}

你可以在 Pager 组件中添加多个页面，每个页面都可以是任何类型的 Compose 组件。例如，你可以添加一个带有文本和按钮的页面，或者添加一个带有列表的页面。

Pager(
    state = pagerState,
    vertical = false,
    contentPadding = PaddingValues(16.dp)
) {
    // 添加你的页面内容
    Page(
        content = {
            Text(text = "Page 1")
            Button(onClick = { /* Handle click */ }) {
                Text(text = "Click me!")
            }
        }
    )

    Page(
        content = {
            val list = remember { (1..10).toList() }
            LazyColumn {
                items(list) { item ->
                    Text(text = "Item $item")
                }
            }
        }
    )
}

PagerTabStrip

PagerTabStrip 是一个与 Pager 组件配合使用的组件，它可以在 Pager 的顶部或底部显示一个标签栏，用户可以通过点击标签来切换页面。

PagerTabStrip(
    pagerState = pagerState,
    labelProvider = { page ->
        when (page) {
            0 -> "Page 1"
            1 -> "Page 2"
            else -> "Page ${page + 1}"
        }
    }
)

PagerContent

PagerContent 是一个与 Pager 组件配合使用的组件，它可以让你在 Pager 中滚动页面时，保持页面内容的可见性。

PagerContent(pagerState = pagerState) {
    // 添加你的页面内容
}

PagerState

PagerState 对象保存了当前页面的索引，以及页面滑动方向等信息。你可以在 Pager 组件中使用 PagerState 对象来控制当前页面，或者获取当前页面的索引。

val currentPage = pagerState.currentPage
pagerState.scrollToPage(2) // 滑动到第三页

PagerAdapter

PagerAdapter 是一个适配器，它可以让你将一个列表的数据项绑定到 Pager 组件中。

val adapter = PagerAdapter(
    count = list.size
) { page ->
    // 返回第 page 页的页面内容
    Text(text = "Page $page")
}

Pager(
    state = pagerState,
    vertical = false,
    contentPadding = PaddingValues(16.dp),
    adapter = adapter
)