如何为Compose的dragAndDropSource添加按压状态/波纹动画？

当然可以实现，只需将clickable（提供波纹反馈）与dragAndDropSource（处理拖拽逻辑）结合，同时优化长按触发拖拽的时机，就能达到和普通可点击组件一致的波纹效果，同时保留完整的点击、拖拽功能。

完整代码示例 #

@Composable
fun DraggableBoxWithRipple(context: Context) {
    Box(
        modifier = Modifier
            .size(120.dp)
            .background(Color.LightGray)
            // 优先添加clickable，提供波纹反馈和点击事件
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = ripple(color = Color.Blue), // 可自定义波纹颜色
                onClick = {
                    Toast.makeText(context, "点击触发", Toast.LENGTH_SHORT).show()
                }
            )
            // 再添加拖拽源，处理拖拽逻辑
            .dragAndDropSource(
                dragAndDropSourceState = rememberDragAndDropSourceState(),
                onDragStart = { /* 在这里处理拖拽开始的逻辑，比如传递拖拽数据 */ },
                onDragEnd = { success -> /* 拖拽结束后的回调，success表示是否成功 */ }
            ) {
                // 处理长按手势，主动触发拖拽
                detectTapGestures(
                    onLongPress = { offset ->
                        Toast.makeText(context, "长按启动拖拽", Toast.LENGTH_SHORT).show()
                        startDragAndDrop(offset) // 立即启动拖拽，避免延迟
                    }
                )
            }
    ) {
        Text(text = "拖拽+波纹Box", modifier = Modifier.align(Alignment.Center))
    }
}

关键细节说明 #

• Modifier顺序：必须先添加clickable再添加dragAndDropSource，这样clickable的交互源（MutableInteractionSource）能优先捕获按压手势，触发波纹反馈，同时不会被拖拽手势覆盖。
• 优化长按响应：在onLongPress中主动调用startDragAndDrop，解决原代码中长按等待拖拽启动的延迟问题，让长按瞬间有反馈。
• 复用默认波纹：直接使用ripple()即可得到和普通clickable一致的波纹效果，也可以通过ripple(color = ...)自定义波纹颜色、半径等参数。
• 逻辑分离：点击事件交给clickable的onClick处理，拖拽的启动/结束逻辑交给dragAndDropSource的回调，代码结构更清晰，避免手势冲突。

如果需要更复杂的交互（比如拖拽过程中改变波纹状态），可以自定义Indication来监听拖拽状态，但上述方案已经能满足大部分场景的需求。

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