Jetpack Compose双HorizontalPager联动滚动动画卡顿问题求助

想要实现两个HorizontalPager组件的联动滚动——滚动其中一个时另一个随之滚动，但实际操作中滚动动画卡顿异常，原代码如下：

val imagePagerState = rememberPagerState(pageCount = { 3 })
    val textPagerState = rememberPagerState(pageCount = { 3 })
    val scope = rememberCoroutineScope()
    val scrollingFollowingPair by remember {
        derivedStateOf {
            if (imagePagerState.isScrollInProgress) {
                imagePagerState to textPagerState
            } else if (textPagerState.isScrollInProgress) {
                textPagerState to imagePagerState
            } else null
        }
    }
    LaunchedEffect(scrollingFollowingPair) {
        val (scrollingState, followingState) = scrollingFollowingPair ?: return@LaunchedEffect
        snapshotFlow { scrollingState.currentPage + scrollingState.currentPageOffsetFraction }
            .collect { pagePart ->
                val divideAndRemainder = BigDecimal.valueOf(pagePart.toDouble())
                    .divideAndRemainder(BigDecimal.ONE)

                val page = divideAndRemainder[0].toInt()
                val fraction = divideAndRemainder[1].toFloat().coerceIn(-0.5f, 0.5f)

                followingState.animateScrollToPage(page, fraction)
            }
    }

卡顿原因分析 #

• 动画叠加冲突：每次滚动进度变化都调用animateScrollToPage，会不断创建新的滚动动画，旧动画未完成就被新动画打断，导致动画队列堆积，引发卡顿。
• 冗余计算开销：用BigDecimal拆分页码和偏移量属于过度设计，普通浮点数运算即可完成，额外的精度转换会消耗不必要的性能。
• 状态判断逻辑模糊：通过derivedStateOf判断滚动对的方式，容易触发双向滚动循环，进一步加剧卡顿。

修复方案 #

核心思路是实时同步滚动状态而非触发动画，同时跟踪主动滚动的Pager避免循环触发：

val imagePagerState = rememberPagerState(pageCount = { 3 })
val textPagerState = rememberPagerState(pageCount = { 3 })

// 标记当前主动滚动的Pager，防止双向触发循环
val activePager = remember { mutableStateOf<PagerState?>(null) }

// 联动imagePager到textPager
LaunchedEffect(imagePagerState) {
    snapshotFlow {
        imagePagerState.currentPage to imagePagerState.currentPageOffsetFraction
    }.collect { (currentPage, offsetFraction) ->
        if (activePager.value == null || activePager.value == imagePagerState) {
            activePager.value = imagePagerState
            // 使用无动画的scrollToPage实时同步位置，避免动画堆积
            textPagerState.scrollToPage(currentPage, offsetFraction)
            // 滚动结束后清空标记
            if (!imagePagerState.isScrollInProgress) {
                activePager.value = null
            }
        }
    }
}

// 联动textPager到imagePager
LaunchedEffect(textPagerState) {
    snapshotFlow {
        textPagerState.currentPage to textPagerState.currentPageOffsetFraction
    }.collect { (currentPage, offsetFraction) ->
        if (activePager.value == null || activePager.value == textPagerState) {
            activePager.value = textPagerState
            imagePagerState.scrollToPage(currentPage, offsetFraction)
            if (!textPagerState.isScrollInProgress) {
                activePager.value = null
            }
        }
    }
}

改进说明 #

• 替换动画为实时同步：用无动画的scrollToPage替代animateScrollToPage，直接同步滚动位置，彻底避免动画叠加问题。
• 避免循环触发：通过activePager标记当前主动滚动的Pager，只有主动滚动的Pager能触发另一个的同步，防止双向循环。
• 简化计算逻辑：直接获取currentPage和currentPageOffsetFraction，去掉冗余的BigDecimal运算，提升性能。
• 独立监听逻辑：两个Pager分别监听滚动状态，逻辑更清晰，便于后续维护。

如果需要平滑联动（而非完全实时），可以在snapshotFlow后添加debounce(16)来限制同步频率，平衡流畅度和实时性。

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