如何在Jetpack Compose Horizontal Pager中动态添加页面并刷新？

1. 定义页面类型模型 #

先封装不同的页面类型，方便后续扩展新页面：

sealed class PageType {
    object ChoiceList : PageType()
    object MapFragment : PageType()
    // 新增页面时，直接在这里添加新的类型即可
}

2. 在ViewModel中维护可观察的页面列表 #

把页面列表改成可观察状态，确保内容变化时Compose能自动触发重组：

class MainViewModel : ViewModel() {
    // 初始化默认页面，用mutableStateListOf实现状态监听
    val pages = mutableStateListOf<PageType>(
        PageType.ChoiceList,
        PageType.MapFragment
    )

    // 动态添加页面的方法
    fun addNewPage(page: PageType) {
        pages.add(page)
    }
}

3. 改造ViewPager Composable #

去掉硬编码的pageCount和页面分支，直接绑定ViewModel的页面列表：

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ViewPagerCompose(viewModel: MainViewModel) {
    val pagerState = rememberPagerState(initialPage = 0)
    val pages = viewModel.pages

    HorizontalPager(state = pagerState, pageCount = pages.size) { pageIndex ->
        when (pages[pageIndex]) {
            PageType.ChoiceList -> ShowChoiceList(viewModel = viewModel)
            PageType.MapFragment -> FragmentMapInCompose()
            // 新增页面类型时，在这里补充对应的渲染逻辑
        }
    }
}

4. 可选：添加页面后自动跳转 #

如果需要添加新页面后自动切换到新页面，可以监听页面列表的大小变化：

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ViewPagerCompose(viewModel: MainViewModel) {
    val pagerState = rememberPagerState(initialPage = 0)
    val pages = viewModel.pages
    val coroutineScope = rememberCoroutineScope()

    // 页面数量变化时，自动滚动到最后一页
    LaunchedEffect(pages.size) {
        if (pages.isNotEmpty()) {
            pagerState.animateScrollToPage(pages.size - 1)
        }
    }

    HorizontalPager(state = pagerState, pageCount = pages.size) { pageIndex ->
        when (pages[pageIndex]) {
            PageType.ChoiceList -> ShowChoiceList(viewModel = viewModel)
            PageType.MapFragment -> FragmentMapInCompose()
        }
    }

    // 示例：添加触发按钮
    Button(onClick = {
        viewModel.addNewPage(PageType.MapFragment) // 可替换为任意新增页面类型
    }) {
        Text("添加新页面")
    }
}

核心逻辑说明 #

• 利用mutableStateListOf的可观察特性，页面列表变化时会自动触发Compose重组，更新HorizontalPager的页面数量和内容。
• 通过密封类封装页面类型，避免硬编码索引，后续新增页面只需扩展PageType和对应的渲染分支，无需修改Pager核心逻辑。

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