如何在QML ListView中创建并拖拽图片的副本？

核心思路 #

• 给ListView的每个列表项添加拖拽支持，拖拽时传递图片源和对应索引作为MIME数据
• 自定义拖拽预览视图，确保原ListView项保持不动，拖拽的是独立副本
• DropArea接收拖拽数据，解析出索引和图片源，完成副本展示

完整代码示例 #

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    width: 800
    height: 600
    color: "#f0f0f0"

    // ListView数据源，存储图片路径
    ListModel {
        id: imageModel
        ListElement { imgSource: "qrc:/images/img1.png" }
        ListElement { imgSource: "qrc:/images/img2.png" }
        ListElement { imgSource: "qrc:/images/img3.png" }
    }

    // 左侧图片列表
    ListView {
        id: imageListView
        anchors.left: parent.left
        anchors.top: parent.top
        width: 200
        height: parent.height
        spacing: 10
        padding: 10
        model: imageModel

        delegate: Image {
            id: delegateImg
            width: 180
            height: 120
            source: imgSource
            fillMode: Image.PreserveAspectFit
            border.width: 2
            border.color: "#ccc"
            radius: 4

            // 拖拽处理逻辑
            DragHandler {
                id: dragHandler
                dragThreshold: 0 // 点住即触发拖拽，可按需调整
                onDragStarted: {
                    drag.source = delegateImg;
                    // 把索引转成字符串存在MIME数据里
                    drag.mimeData.setText(model.index.toString());
                    // 传递图片路径
                    drag.mimeData.setUrls([Qt.resolvedUrl(imgSource)]);
                    // 自定义拖拽预览的副本图片，和原项完全独立
                    drag.preview = Image {
                        width: 100
                        height: 70
                        source: imgSource
                        fillMode: Image.PreserveAspectFit
                        border.width: 2
                        border.color: "#2196F3"
                        radius: 4
                    }
                }
                onDragFinished: {
                    drag.preview = null; // 拖拽结束清理预览
                }
            }
        }
    }

    // 右侧放置区域
    DropArea {
        anchors.left: imageListView.right
        anchors.leftMargin: 20
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: parent.width - imageListView.width - 20
        color: "#e0e0e0"
        radius: 8
        border.width: 2
        border.color: drag.active ? "#2196F3" : "#999"

        // 存放已拖拽图片的容器
        Column {
            id: droppedImagesContainer
            anchors.fill: parent
            spacing: 15
            padding: 20
            anchors.margins: 20
        }

        // 处理放置事件
        onDropped: {
            // 解析MIME数据里的索引
            const itemIndex = parseInt(drop.mimeData.text);
            // 获取图片路径
            const imgUrl = drop.mimeData.urls[0].toString();

            // 在放置区域添加图片副本，并显示对应索引
            Image {
                parent: droppedImagesContainer
                width: 120
                height: 80
                source: imgUrl
                fillMode: Image.PreserveAspectFit
                border.width: 2
                border.color: "#666"
                radius: 4

                Text {
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: "索引: " + itemIndex
                    color: "white"
                    font.bold: true
                    background: Rectangle { color: "rgba(0,0,0,0.6)" }
                }
            }
        }
    }
}

关键细节拆解 #

• 拖拽预览通过drag.preview单独创建Image组件，和原列表项无关联，确保原ListView内容完全不受影响
• 用MIME数据传递索引和图片路径：setText()存索引字符串，setUrls()存图片地址，DropArea可直接解析使用
• DropArea接收拖拽后，新建Image组件添加到容器中，全程不修改原ListView的model或delegate
• dragThreshold: 0设置为点击即触发拖拽，若需要拖动一定距离才触发，修改该数值即可

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