Jetpack Compose横向滚动Row吞吃内部自定义Canvas控件点击拖拽事件如何解决

问题原因 #

带有horizontalScroll修饰符的横向滚动Row内置的手势检测器优先级高于自定义控件的普通pointerInput手势，它会优先识别水平方向的滚动意图，一旦判定为水平滚动就会拦截后续所有事件，导致内部的点击、垂直拖拽事件无法响应。即使自定义控件的拖拽回调中调用了consumeAllChanges，也会因为事件已经被外部滚动控件提前拦截而无法生效。

可行实现方案 #

方案1：自定义手势判定，兼容内外手势需求 #

将点击和拖拽逻辑整合到同一个pointerInput修饰符中，手动判断手势方向：如果是垂直方向拖动或者点击事件，就直接消费事件交给内部控件处理；如果判定为水平方向拖动，就不消费事件，交给外部Row处理滚动逻辑。
替换自定义控件中原有的两个pointerInput修饰符即可，代码示例如下：

modifier
    .pointerInput(Unit) {
        awaitPointerEventScope {
            var isVerticalDrag = false
            var isTap = true
            // 取系统默认的手势判定阈值，避免误判
            val touchSlop = viewConfiguration.touchSlop

            // 处理按下事件
            val downEvent = awaitFirstDown()
            downEvent.consume()

            while (true) {
                val event = awaitPointerEvent()
                val dragAmount = event.changes.first().positionChange()
                val horizontalOffset = kotlin.math.abs(dragAmount.x)
                val verticalOffset = kotlin.math.abs(dragAmount.y)

                when {
                    // 垂直拖动距离超过阈值，且明显大于水平拖动距离，判定为内部拖拽操作
                    !isVerticalDrag && verticalOffset > touchSlop && verticalOffset > horizontalOffset * 1.5 -> {
                        isVerticalDrag = true
                        isTap = false
                        // 替换为自定义的拖拽开始逻辑
                        onDragStart?.invoke(downEvent.position)
                    }
                    // 水平拖动距离超过阈值，判定为外部滚动操作，不消费事件直接退出事件处理
                    !isVerticalDrag && horizontalOffset > touchSlop -> {
                        break
                    }
                }

                if (isVerticalDrag) {
                    // 消费事件，执行自定义拖拽逻辑
                    event.changes.forEach { it.consume() }
                    // 替换为自定义的拖拽过程逻辑
                    onDrag?.invoke(event.changes.first(), dragAmount)
                }

                // 手势结束处理
                if (event.changes.all { it.changedToUp() }) {
                    if (isTap) {
                        // 替换为自定义的点击逻辑
                        onPress?.invoke(downEvent.position)
                    } else if (isVerticalDrag) {
                        // 替换为自定义的拖拽结束逻辑
                        onDragEnd?.invoke()
                    }
                    break
                }
            }
        }
    }

该方案可以同时保留外部横向滚动能力和内部控件的交互能力，体验最优。

方案2：强制内部手势优先响应 #

如果自定义控件区域不需要触发外部滚动，希望所有落在控件区域的事件都优先交给内部处理，可以使用pointerInteropFilter修饰符，它的优先级高于Compose内置的滚动手势，直接在原有pointerInput修饰符前添加即可：

modifier
    .pointerInteropFilter {
        // 返回true表示消费所有落在该控件区域的触摸事件
        true
    }
    // 原有pointerInput修饰符保留即可
    .pointerInput(Unit) {
        // 原有拖拽逻辑
    }
    .pointerInput(Unit) {
        // 原有点击逻辑
    }

该方案实现简单，但会导致在自定义控件区域无法滑动外部Row，适合自定义控件占满屏幕宽度的场景。

优化建议 #

可以根据产品需求调整手势判定的阈值比例，比如垂直偏移是水平偏移的2倍以上才判定为内部拖拽，进一步减少水平滚动时的误触概率。

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