使用HorizontalPager搭配ScrollableTabRow时，页面列表变更后如何保留用户选中标签

核心思路 #

要实现需求，关键在于更新页面列表后，根据原选中状态计算新的选中索引，避免Pager自动跳转到错误位置。

具体实现步骤 #

1. 维护核心状态变量 #

需要两个关键状态：

• 页面数据列表（比如pages: List<PageData>）
• 当前选中的页面索引（selectedPageIndex: Int）

2. 移除页面时计算新索引 #

当移除某一页时，按以下逻辑处理：

• 若被移除的页面不是当前选中页：
  • 被移除页索引小于当前选中索引 → 新索引 = 当前索引 - 1（列表长度减少，后续元素前移）
  • 被移除页索引大于当前选中索引 → 新索引保持不变
• 若被移除的页面是当前选中页 → 新索引直接重置为0

3. 联动Pager与标签组件 #

确保Pager的滚动状态和标签组件的选中状态与维护的selectedPageIndex同步：

• 用PagerState的scrollToPage方法更新页面位置
• 标签组件的选中状态绑定selectedPageIndex，点击标签时更新该索引并触发Pager滚动

代码示例 #

// 页面数据类示例
data class PageData(val id: String, val title: String)

@Composable
fun PagerWithTabs() {
    var pages by remember { mutableStateOf(listOf(
        PageData("1", "页面1"),
        PageData("2", "页面2"),
        PageData("3", "页面3")
    )) }
    var selectedPageIndex by remember { mutableStateOf(0) }
    val pagerState = rememberPagerState(initialPage = selectedPageIndex)

    // 同步选中索引与Pager滚动状态
    LaunchedEffect(selectedPageIndex) {
        pagerState.scrollToPage(selectedPageIndex)
    }

    Column {
        // 标签栏
        TabRow(selectedTabIndex = selectedPageIndex) {
            pages.forEachIndexed { index, page ->
                Tab(
                    selected = index == selectedPageIndex,
                    onClick = { selectedPageIndex = index },
                    text = { Text(page.title) }
                )
            }
        }

        // Pager组件
        HorizontalPager(
            state = pagerState,
            count = pages.size,
            onPageSelected = { selectedPageIndex = it }
        ) { index ->
            Text(
                text = pages[index].title,
                fontSize = 24.sp,
                modifier = Modifier.fillMaxSize().wrapContentSize()
            )
        }

        // 移除页面按钮示例
        Button(onClick = {
            val removeIndex = 1 // 假设移除索引为1的页面
            val newIndex = when {
                removeIndex == selectedPageIndex -> 0
                removeIndex < selectedPageIndex -> selectedPageIndex - 1
                else -> selectedPageIndex
            }
            // 更新页面列表
            pages = pages.filterIndexed { idx, _ -> idx != removeIndex }
            // 更新选中索引，确保不越界
            selectedPageIndex = newIndex.coerceAtLeast(0)
        }) {
            Text("移除页面2")
        }
    }
}

关键细节 #

• 用LaunchedEffect监听索引变化，自动同步Pager位置，避免标签和Pager状态不一致
• 索引计算逻辑覆盖所有场景，最后用coerceAtLeast(0)防止出现负数索引
• Pager的onPageSelected回调同步更新选中索引，保证手动滑动Pager时标签状态也能同步

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