Jetpack Compose中LazyList侧滑删除的垂直滚动误触问题

在LazyList中使用SwipeToDismiss时，垂直滚动误触水平侧滑的核心问题是触摸事件优先级冲突——默认情况下SwipeToDismiss会优先响应水平拖拽，哪怕用户本意是垂直滚动。要解决这个问题，我们可以通过自定义触摸事件拦截逻辑，先判断用户的滑动方向，只有当水平滑动距离显著大于垂直时，才允许SwipeToDismiss处理事件，否则将事件传递给LazyColumn的滚动系统。

具体实现方案 #

我们可以在SwipeToDismiss外层添加触摸拦截修饰符，跟踪初始触摸位置和滑动偏移，根据方向决定是否拦截事件：

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun MySwipeToDismiss(
    modifier: Modifier = Modifier,
    onSwipeLeft: () -> Unit,
    onSwipeRight: () -> Unit,
    content: @Composable () -> Unit
) {
    val dismissState = rememberDismissState {
        when (it) {
            DismissValue.Default -> false
            DismissValue.DismissedToEnd -> onSwipeRight()
            DismissValue.DismissedToStart -> onSwipeLeft()
        }
        true
    }

    // 跟踪触摸初始位置和滑动状态
    var initialTouchOffset by remember { mutableStateOf(Offset.Zero) }
    var isHorizontalDrag by remember { mutableStateOf(false) }
    val horizontalThreshold = with(LocalDensity.current) { 20.dp.toPx() }

    Box(
        modifier = modifier
            .pointerInput(Unit) {
                detectDragGestures(
                    onDragStart = { offset ->
                        initialTouchOffset = offset
                        isHorizontalDrag = false
                    },
                    onDrag = { change, _ ->
                        if (!isHorizontalDrag) {
                            // 计算水平和垂直滑动距离的绝对值
                            val horizontalDiff = (change.position.x - initialTouchOffset.x).absoluteValue
                            val verticalDiff = (change.position.y - initialTouchOffset.y).absoluteValue
                            // 当水平滑动距离大于垂直且超过阈值时，标记为水平拖拽
                            isHorizontalDrag = horizontalDiff > verticalDiff && horizontalDiff > horizontalThreshold
                            if (!isHorizontalDrag) {
                                // 垂直滑动时不消费事件，让LazyColumn处理滚动
                                change.consumeAllChanges()
                            }
                        }
                    }
                )
            }
    ) {
        SwipeToDismiss(
            state = dismissState,
            dismissThresholds = { FractionalThreshold(0.7f) },
            background = {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color.Cyan)
                )
            },
            dismissContent = content
        )
    }
}

关键逻辑说明 #

1. 触摸初始位置跟踪：在onDragStart记录初始触摸点，用于后续计算滑动偏移。
2. 滑动方向与阈值判断：在onDrag回调中，对比水平和垂直滑动的距离绝对值，同时加入固定阈值过滤微小误触——只有当水平距离更大且超过阈值时，才允许SwipeToDismiss响应侧滑。
3. 事件传递控制：垂直滑动时通过change.consumeAllChanges()阻止SwipeToDismiss获取事件，确保LazyColumn的滚动优先级更高。

额外优化建议 #

• 可以根据需求调整horizontalThreshold的数值，平衡灵敏度和误触概率。
• 保持LazyColumn的scrollState正常传递，避免滚动状态异常。

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