qt - 如何在 QML 中将项目拖动到 ListView 之外

Question

我正在开发一个 QML 应用程序，它基本上包含两个 ListView。我想将 QML 项目从一个 ListView 复制到另一个 ListView。我尝试通过在委托(delegate)中设置 Drag 属性来处理此问题，但当我拖动项目时，该项目无法移出 View ，我认为 Flickable 容器处理鼠标事件。
所以，我想尝试以下方法:

• 创建一个与ListView重叠的鼠标区域
• 通过调用 **createComponent()/createObject()** 创建一个新对象
• 将此对象重新设置为鼠标区域的父级
• 处理鼠标区域中的鼠标事件直到放下

这个解决方案在我看来有点复杂，那么你有更好的方法来实现这个吗？

---

这是一个坏主意，而且太复杂了。我想我有办法实现这一目标:

• ListView的每个委托(delegate)都有一个可以拖动的隐藏Item，
• 由于我的 ListView 位于可重用组件中，因此我使用一个属性来传递更高的项目(此处为矩形，而不是 **MouseArea**)，该项目可用作拖动项目的父级，
• 较高的项目包含两个ListView(将来可能会更多)，
• 当拖动开始时，该项目被设置为可见并使用 **State** 重新设置父级

所以，我错过了设置父级应该解决我的问题的要点。

Answer 1

下一个代码只是一个想法，但关键是在第一个 ListView 的 delegate 内有一个 MouseArea，以便用户可以将项目拖放到属于第二个 ListView 的 DropArea 中。

在这个例子中，model非常简单，只是一个数字。当项目被删除时，它会从第一个 ListView 中删除:

listView.model.remove(listView.dragItemIndex)

只需删除该行代码即可复制该项目，而不是删除。

ma​​in.qml

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true
    width: 600
    height: 600

    Rectangle {
        id: root
        width: 400
        height: 400

        ListView {
            id: listView
            width: parent.width / 2
            height: parent.height

            property int dragItemIndex: -1

            model: ListModel {
                Component.onCompleted: {
                    for (var i = 0; i < 10; ++i) {
                        append({value: i});
                    }
                }
            }

            delegate: Item {
                id: delegateItem
                width: listView.width
                height: 50

                Rectangle {
                    id: dragRect
                    width: listView.width
                    height: 50
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    color: "salmon"
                    border.color: Qt.darker(color)

                    Text {
                        anchors.centerIn: parent
                        text: modelData
                    }

                    MouseArea {
                        id: mouseArea
                        anchors.fill: parent
                        drag.target: dragRect

                        drag.onActiveChanged: {
                            if (mouseArea.drag.active) {
                                listView.dragItemIndex = index;
                            }
                            dragRect.Drag.drop();
                        }
                    }

                    states: [
                        State {
                            when: dragRect.Drag.active
                            ParentChange {
                                target: dragRect
                                parent: root
                            }

                            AnchorChanges {
                                target: dragRect
                                anchors.horizontalCenter: undefined
                                anchors.verticalCenter: undefined
                            }
                        }
                    ]

                    Drag.active: mouseArea.drag.active
                    Drag.hotSpot.x: dragRect.width / 2
                    Drag.hotSpot.y: dragRect.height / 2
                }
            }
        }

        ListView {
            id: listView2
            width: parent.width / 2
            height: parent.height
            anchors.right: parent.right

            property int dragItemIndex: -1

            DropArea {
                id: dropArea
                anchors.fill: parent
                onDropped: {
                    listView2.model.append(listView.model.get(listView.dragItemIndex))
                    listView.model.remove(listView.dragItemIndex)
                    listView.dragItemIndex = -1;
                }
            }

            model: ListModel {
                Component.onCompleted: {
                    for (var i = 0; i < 1; ++i) {
                        append({value: i});
                    }
                }
            }

            delegate: Item {
                id: delegateItem2
                width: listView2.width
                height: 50

                Rectangle {
                    id: dragRect2
                    width: listView2.width
                    height: 50
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    color: "salmon"
                    border.color: Qt.darker(color)

                    Text {
                        anchors.centerIn: parent
                        text: modelData
                    }
                }
            }
        }
    }
}