如何实现滚动状态下LazyColumn列表项的可点击功能？

核心思路是自定义触摸事件处理，区分点击和滚动滑动操作：通过记录触摸按下的初始位置，在抬起时计算滑动偏移量，当偏移量小于设定阈值时才触发点击逻辑，同时不干扰LazyColumn的滚动行为。

具体实现代码如下：

@Composable
@Preview
fun ClickScrollingList() {
    val state = rememberLazyListState()
    val isDrag by state.interactionSource.collectIsDraggedAsState()
    // 定义滑动阈值，小于这个距离判定为点击
    val tapSlop = 16.dp.toPx()

    LaunchedEffect(isDrag.not(), state.isScrollInProgress.not()) {
        while (isDrag.not() && state.isScrollInProgress.not()) {
            state.animateScrollBy(
                value = 100f,
                animationSpec = tween(
                    1000,
                    easing = LinearEasing
                )
            )
        }
    }

    LazyColumn(
        modifier = Modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(10.dp),
        state = state,
    ) {
        items(10000) { index ->
            Text(
                "I am $index",
                modifier = Modifier
                    .fillMaxWidth()
                    .pointerInput(Unit) {
                        detectTapGestures(
                            // 处理点击：只有滑动偏移小于阈值才触发
                            onTap = {
                                // 这里写你的点击逻辑
                                println("Item $index clicked")
                            },
                            // 设定滑动阈值，超过这个值就不触发点击
                            tapSlop = tapSlop
                        )
                    }
            )
        }
    }
}

关键说明 #

• 使用detectTapGestures替代默认的clickable，它允许通过tapSlop参数设置滑动阈值，当触摸滑动距离超过这个值时，不会触发onTap回调。
• 这种方式既保留了LazyColumn的滚动交互，又能在用户点击（滑动距离极小）时正常响应列表项的点击事件，完美区分滚动和点击操作。

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