Jetpack Compose中如何实现横向Pager与纵向滚动同时生效？

问题根因 #

你遇到的是Jetpack Compose 1.0.x版本的嵌套滚动控件触摸事件优先级bug：verticalScroll修饰符会在触摸滑动阈值判定阶段优先拦截所有触摸事件，不会提前判断滚动方向，导致横向Pager的滑动事件被纵向滚动容器提前消费。

解决方案 #

方案1：依赖升级（首选） #

如果项目可以接受依赖升级，直接升级到以下版本即可原生修复方向判定问题，无需额外修改业务逻辑：

• Compose 版本 >= 1.1.0
• Accompanist Pager 版本 >= 0.24.0-alpha
  升级后系统会自动根据手指滑动的方向判断事件分发目标，横向Pager滑动和纵向页面滚动可以同时正常响应。

方案2：低版本兼容适配（适配当前Compose 1.0.2版本） #

如果暂时无法升级依赖，可以通过自定义触摸拦截逻辑解决，修改代码如下：

1. 替换原HeaderImage所在区域的代码，增加自定义方向判定逻辑
2. 原有视差滚动、TopAppBar变色逻辑完全保留，无需修改

val scrollState = rememberScrollState()
val pagerState = rememberPagerState()
Box {
    val imageHeight =
        if (LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE) 180.dp else 300.dp
    Box(
        Modifier
            .height(imageHeight)
            .fillMaxWidth()
            // 自定义触摸逻辑，优先判定横向滑动
            .pointerInput(Unit) {
                val touchSlop = ViewConfiguration.get(context).scaledTouchSlop
                var initialX = 0f
                var initialY = 0f
                var isHorizontalDragging = false

                forEachGesture {
                    awaitPointerEventScope {
                        val downEvent = awaitFirstDown()
                        initialX = downEvent.position.x
                        initialY = downEvent.position.y
                        isHorizontalDragging = false
                        // 按下时通知父布局暂时不要拦截
                        parentPositionChangeConsumed()
                    }

                    awaitPointerEventScope {
                        while (true) {
                            val event = awaitPointerEvent()
                            val deltaX = event.changes.first().position.x - initialX
                            val deltaY = event.changes.first().position.y - initialY

                            if (!isHorizontalDragging) {
                                // 横向滑动距离大于阈值且是纵向的1.5倍以上，判定为横向滚动
                                if (abs(deltaX) > touchSlop && abs(deltaX) > abs(deltaY) * 1.5f) {
                                    isHorizontalDragging = true
                                }
                            }

                            if (isHorizontalDragging) {
                                // 横向滑动时消费事件，不让父布局拦截
                                event.changes.forEach { it.consumePositionChange() }
                            }
                        }
                    }
                }
            }
    ) {
        // 替换为横向Pager
        HorizontalPager(
            count = item.heroImages.size,
            state = pagerState,
            modifier = Modifier.fillMaxSize()
        ) { page ->
            HeaderImage(
                scrollPosition = scrollState.value,
                info = item.heroImages[page],
                imageHeight = imageHeight
            )
        }
        // 手动翻页的图标也放在这个Box层级下，点击事件不会被消费
    }
    val appBarHeight = with(LocalDensity.current) { 56.dp.toPx() }
    val scrollHeight = with(LocalDensity.current) { imageHeight.toPx() - appBarHeight }

    Column(
        Modifier
            .verticalScroll(scrollState)
            .padding(top = imageHeight)
            .fillMaxSize()
    ) { /* 原有内容不变 */ }
    TopAppBar( /* 原有逻辑不变 */ )
}

注意事项 #

• 自定义逻辑里的1.5倍方向判定系数可以根据实际交互需求调整，系数越大越优先响应纵向滚动
• 如果需要给Pager加指示器、手动翻页按钮，直接放在Pager所在的Box层级即可，点击事件不会被消费

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