Jetpack Compose中HorizontalPager滚动时页面内容重复调用问题

问题原因分析 #

HorizontalPager默认会预加载相邻页面（默认预加载1个），同时Compose的重组机制可能导致页面内容代码被多次执行；另外如果直接在item作用域内发起数据请求，每次重组都会触发重复请求，这就是你遇到第二页内容逻辑执行两次的核心原因。

解决方案 #

1. 给Pager页面设置唯一Key #

给每个页面绑定唯一标识，帮助Compose准确识别页面身份，避免不必要的组件复用和重组：

HorizontalPager(
    pageCount = tabs.size,
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
    // 使用每个tab的唯一标识作为key，比如section的ID或path
    key = { tabs[it].section.path }
) { pageIndex ->
    val tab = tabs[pageIndex]
    val layoutPath = tab.section.layout + tab.section.path
    SectionUi(layoutPath = layoutPath, tab = tab, pageIndex = pageIndex, pagerState = pagerState)
}

2. 在页面组件内使用LaunchedEffect控制数据请求 #

在SectionUi内部，结合页面索引和Pager状态，确保仅在页面稳定可见时发起请求，同时用缓存避免重复调用：

@Composable
fun SectionUi(
    layoutPath: String,
    tab: Tab,
    pageIndex: Int,
    pagerState: PagerState
) {
    // 用rememberSaveable保存页面数据，避免配置变化丢失
    val pageData = rememberSaveable(pageIndex) { mutableStateOf<YourDataModel?>(null) }

    LaunchedEffect(pageIndex, pagerState.currentPage, pagerState.isScrollInProgress) {
        // 仅当当前页面为目标页面、滚动已停止，且数据未加载时发起请求
        if (pagerState.currentPage == pageIndex && !pagerState.isScrollInProgress && pageData.value == null) {
            // 替换为你的接口请求逻辑
            val fetchedData = yourApiService.fetchData(tab.section.path)
            pageData.value = fetchedData
        }
    }

    // 根据数据状态渲染UI
    when (val data = pageData.value) {
        null -> {
            // 加载中UI
            CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
        }
        else -> {
            // 页面内容UI，传入data和layoutPath
            PageContent(data = data, layoutPath = layoutPath)
        }
    }
}

3. 全局监听Pager状态统一管理数据请求 #

如果需要统一管理所有页面的数据请求，可以在父组件中通过snapshotFlow监听Pager状态，过滤无效状态后发起请求：

// 父组件中创建数据缓存
val dataCache = remember { mutableMapOf<Int, YourDataModel>() }

LaunchedEffect(pagerState) {
    snapshotFlow { pagerState.currentPage to pagerState.isScrollInProgress }
        // 过滤掉滚动中的状态，只处理稳定的页面切换
        .filter { (_, isScrolling) -> !isScrolling }
        // 仅当页面索引变化时触发
        .distinctUntilChangedBy { it.first }
        .collect { (currentPage, _) ->
            if (!dataCache.containsKey(currentPage)) {
                val tab = tabs[currentPage]
                val fetchedData = yourApiService.fetchData(tab.section.path)
                dataCache[currentPage] = fetchedData
            }
        }
}

// 在HorizontalPager的item中直接从缓存取数据
HorizontalPager(...) { pageIndex ->
    val tab = tabs[pageIndex]
    val layoutPath = tab.section.layout + tab.section.path
    val data = dataCache[pageIndex]
    SectionUi(layoutPath = layoutPath, data = data)
}

注意事项 #

• 预加载：HorizontalPager的beyondBoundsPageCount参数可以调整预加载数量，设为0会关闭预加载，但会影响滚动流畅度，按需使用。
• 缓存策略：如果需要支持页面刷新，可在缓存中添加刷新标志，或者在下拉刷新时清除对应页面的缓存并重新请求。
• 错误处理：实际代码中需给接口请求添加异常捕获，处理请求失败的场景。

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