Jetpack Compose中如何禁止HorizontalPager滑动并实现下一个元素懒加载

方案1：使用官方参数（推荐） #

Compose 1.4+ 官方自带Pager、以及Accompanist Pager v0.28.0+ 版本已内置userScrollEnabled参数，直接设为false即可完全禁止用户手动滑动切换：

HorizontalPager(
    state = pagerState,
    pageCount = yourPageCount,
    userScrollEnabled = false // 核心参数，禁用手动滑动
) { page ->
    // 页面内容
}

禁用后仍可通过代码调用pagerState.animateScrollToPage()/scrollToPage()实现主动切换页面。

方案2：低版本兼容方案 #

如果使用不支持userScrollEnabled的低版本Pager，可通过嵌套滚动拦截手势实现：

HorizontalPager(
    state = pagerState,
    pageCount = yourPageCount,
    modifier = Modifier.nestedScroll(remember {
        object : NestedScrollConnection {
            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                // 拦截所有用户拖拽产生的水平滚动
                return if (source == NestedScrollSource.Drag) available else Offset.Zero
            }
        }
    })
) { page ->
    // 页面内容
}

HorizontalPager默认offscreenPageLimit = 1，也就是会预加载当前页左右各1个页面，所以初始状态下会同时创建第0页和第1页，可通过以下方式调整：

关闭预加载（仅渲染可视区域页面） #

新版本Pager支持将offscreenPageLimit设为0，即可完全关闭预加载，只有页面进入可视区域时才会初始化对应页面内容：

HorizontalPager(
    state = pagerState,
    pageCount = yourPageCount,
    offscreenPageLimit = 0 // 关闭默认预加载
) { page ->
    // 页面内容，仅当页面进入可视区域时才会执行初始化
}

更精细的懒加载控制 #

如果需要仅在页面完全切换完成后才触发数据请求等逻辑，可以配合LaunchedEffect监听当前页面变化实现：

val currentPage = pagerState.currentPage
LaunchedEffect(currentPage) {
    // 仅当页面切换完成后，触发当前页的数据加载逻辑
    loadPageData(currentPage)
}

注意事项 #

• offscreenPageLimit = 0可能会导致快速滑动时出现短暂的页面空白，你可以根据业务流畅度需求，在0~1之间调整该参数值
• 不建议将offscreenPageLimit设置过大，会导致同时渲染多页内容，增加内存占用

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