Jetpack Compose中如何偏移Drag Image的拖拽坐标？

问题描述 #

在Jetpack Compose的.dragAndDropSource { ... }中，是否可以将拖拽坐标偏移至用户屏幕按压位置的上方？我希望用户能够看到要放入数据的目标行（该行包含有助于提升UX的文本）。

实现方案 #

完全可以通过自定义拖拽预览的偏移参数实现需求，核心是配置拖拽预览的位置偏移，让预览组件显示在触摸点上方，从而露出下方的目标行。

修改后的代码示例 #

Row(
    modifier = modifier
        .fillMaxWidth()
        .dragAndDropSource {
            detectTapGestures(
                onLongPress = { pressPosition ->
                    transferHudViewModel.startDragging()
                    // 计算向上偏移的距离，可根据目标行高度调整
                    val upwardOffset = Offset(0f, -80.dp.toPx())
                    
                    startTransfer(
                        DragAndDropTransferData(
                            clipData = ClipData(
                                "AccountOverview",
                                arrayOf("MimTypes stuff"),
                                ClipData.Item("N/A")
                            ),
                            localState = dragAndDropPayload,
                            // 配置拖拽预览的偏移和自定义UI
                            dragPreviewParameters = DragPreviewParameters(
                                offset = upwardOffset,
                                // 可选：自定义拖拽预览UI，保持与原Row一致的样式
                                preview = {
                                    Row(modifier = Modifier.fillMaxWidth()) {
                                        // 原Row的内容，确保预览样式统一
                                    }
                                }
                            )
                        )
                    )
                }
            )
        }
) {
    // 原Row内容
}

关键说明 #

• 偏移量设置：通过DragPreviewParameters.offset传入负Y轴偏移值，让拖拽预览向上移动，触摸点下方的目标行就会自然露出。可以根据目标行的实际高度调整偏移数值（比如目标行高60dp，就设置-70.dp.toPx()，留出一点间距）。
• 自定义预览UI：如果默认预览样式不符合需求，可通过preview参数复用原Row的内容，保证拖拽时的视觉一致性。
• 版本要求：需要使用androidx.compose.foundation:foundation:1.6.0及以上版本，DragPreviewParameters是该版本后新增的API。

兼容性处理（旧版本） #

如果你的Compose版本较低，不支持DragPreviewParameters，可以通过自定义预览组件并添加Modifier.offset来实现偏移：

// 在dragAndDropSource作用域内
val preview = @Composable {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .offset(y = (-80).dp) // 直接设置向上偏移
    ) {
        // 原Row内容
    }
}

startTransfer(
    DragAndDropTransferData(
        clipData = ClipData(...),
        localState = dragAndDropPayload,
        preview = preview
    )
)

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