Jetpack Compose中如何检测HorizontalPager的滑动切换事件？

在Jetpack Compose中使用HorizontalPager时，所有页面状态都由你声明的pagerState统一管理，监听pagerState的对应属性变化即可检测滑动切换操作，分两种常用场景：

适合滑动结束、页面稳定后才执行逻辑的场景，比如加载对应页面数据、更新Tab选中状态，直接监听pagerState.currentPage即可：

val pagerState = rememberPagerState(initialPage = 0)

// 新增这段监听逻辑即可
LaunchedEffect(pagerState.currentPage) {
    // currentPage为当前稳定选中的页面下标，切换完成才会触发
    when (TabCategory.values()[pagerState.currentPage]) {
        TabCategory.Opinion -> {
            // 切换到观点页的业务逻辑
        }
        TabCategory.Information -> {
            // 切换到资讯页的业务逻辑
        }
        TabCategory.Videos -> {
            // 切换到视频页的业务逻辑
        }
    }
}

HorizontalPager(count = TabCategory.values().size, state = pagerState) { index ->
    // 原有页面实现代码保持不变
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colors.onBackground)
    ) {
        when (TabCategory.values()[index]) {
            TabCategory.Opinion -> { }
            TabCategory.Information -> { }
            TabCategory.Videos -> { }
        }
    }
}

注意：只有页面滑动动画完全结束后currentPage才会更新，不会在滑动过程中频繁触发回调。

如果需要在用户滑动未松手时就获取滑动进度（比如做Tab指示器和Pager的联动动画），可以监听pagerState.currentPageOffsetFraction属性：

LaunchedEffect(pagerState.currentPage, pagerState.currentPageOffsetFraction) {
    // currentPage是当前正在滑出/滑入的基准页下标
    // currentPageOffsetFraction取值为[-1,1]，代表相对于基准页的滑动偏移比例
    // 可在这里实现自定义联动动画逻辑
}

• 不要在HorizontalPager的content作用域内写切换监听逻辑，否则每次页面重组都会触发，会产生不必要的性能损耗
• 如果仅需要同步Tab的选中状态，直接将pagerState.currentPage作为Tab的selected参数即可，不需要额外存储选中下标变量

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