如何为Accompanist HorizontalPager添加多个不同页面？

无法直接使用LazyColumn的item{}写法 #

HorizontalPager的逻辑是根据传入的count生成对应数量的页面，每个页面由lambda中对应page索引的内容决定，和LazyColumn直接罗列所有项的逻辑不同，没法直接用item{}的方式逐个定义页面。

最简单的两种解决方案 #

方案1：通过page索引分支判断

直接根据当前页面的索引值，返回不同的可组合内容：

HorizontalPager(count = 3) { page ->
    when(page) {
        0 -> Image(painter = painterResource(R.drawable.page1), contentDescription = "第一页")
        1 -> Text("这是第二页的文本内容")
        2 -> Column(verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) {
            Text("第三页标题")
            Button(onClick = { /* 处理点击事件 */ }) {
                Text("操作按钮")
            }
        }
        else -> Text("默认 fallback 页面")
    }
}

方案2：数据驱动页面内容

如果页面数量较多或者内容需要动态生成，可以先定义一个包含所有页面内容的列表，再根据索引取对应内容：

// 先定义页面内容列表，每个元素是一个返回可组合项的函数
val pageList = listOf(
    { Image(painter = painterResource(R.drawable.page1), contentDescription = "第一页") },
    { Text("第二页内容") },
    { Column { /* 第三页的复杂布局 */ } }
)

// 传入列表长度作为count，根据索引渲染对应页面
HorizontalPager(count = pageList.size) { page ->
    pageList[page].invoke()
}

之前写法的问题原因 #

• 第一种写法中，不管当前page索引是多少，都返回同一个ComposableName()，所以所有页面内容完全重复；
• 第二种写法中，在Pager的lambda里连续放置三个Image()，相当于每个页面内部都会同时渲染这三个Image，所以会出现堆叠效果，再加上count=3，这样的堆叠页面会被重复生成三次。

内容的提问来源于stack exchange，提问作者Osanosa