Question

我目前正在尝试在QML中实现拖放到创建机制，但我遇到了一个问题，我需要新创建的MouseArea成为目标鼠标事件，即使原始MouseArea还没有鼠标按钮释放事件。

Window {
    id: window
    width: 300
    height: 300

    Rectangle {
        id: base
        width: 20
        height: 20

        color: "red"

        MouseArea {
            anchors.fill: parent

            property var lastPoint
            property var draggedObj: null

            function vecLength( vec ) {
                return Math.abs( Math.sqrt( Math.pow( vec.x, 2 ) +
                                            Math.pow( vec.y, 2 ) ) );
            }

            onPressed: lastPoint = Qt.point( mouse.x, mouse.y )
            onPositionChanged: {
                if ( !draggedObj ) {
                    var diff = Qt.point( mouse.x - lastPoint.x,
                                         mouse.y - lastPoint.y );
                    if ( vecLength( diff ) > 4 ) {
                        draggedObj = dragObj.createObject( window );
                    }
                }

                mouse.accepted = !draggedObj;
            }
        }
    }

    Component {
        id: dragObj

        Rectangle {
            width: 20
            height: 20

            color: "blue"

            Drag.active: dragArea.drag.active
            Drag.hotSpot.x: 10
            Drag.hotSpot.y: 10

            MouseArea {
                id: dragArea
                anchors.fill: parent

                drag.target: parent
            }
        }
    }
}

如果您运行此代码并进行尝试，您会看到拖动红色Rectangle会导致创建可拖动的蓝色Rectangle，但它不会跟随鼠标，因为红色{ {1}}仍在接收鼠标事件，尽管蓝色MouseArea位于其上方。

有没有办法强制蓝色MouseArea接收鼠标事件？

Answer 1

我以前经历过这个，并在我的阁楼里开始解决方案。

这里的技巧是调用QQuickItem::grabMouse()并向新创建的对象发送鼠标按下事件。不幸的是，我相信这只能通过c ++完成。

然后我创建了一个帮助类来将此功能公开给qml：

`MouseGrabber.h`

#ifndef MOUSEGRABBER
#define MOUSEGRABBER

#include <QObject>
#include <QQuickItem>
#include <QGuiApplication>
#include <QMouseEvent>

class MouseGrabber : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QQuickItem* target READ target WRITE setTarget NOTIFY targetChanged)
    Q_PROPERTY(bool active READ active WRITE setActive NOTIFY activeChanged)

public:
    explicit MouseGrabber(QObject *parent = 0) : QObject(parent), m_target(nullptr), m_active(true) {  }
    QQuickItem* target() const { return m_target; }
    bool active() const { return m_active;}


signals:
    void targetChanged();
    void activeChanged();

public slots:
    void setTarget(QQuickItem* target)
    {
        if (m_target == target)
            return;
        ungrabMouse(m_target);
        if (m_active)
            grabMouse(target);
        m_target = target;
        emit targetChanged();
    }
    void setActive(bool arg)
    {
        if (m_active == arg)
            return;
        m_active = arg;

        if (m_active)
            grabMouse(m_target);
        else
            ungrabMouse(m_target);

        emit activeChanged();
    }

private:
    static void grabMouse(QQuickItem* target)
    {
        if (target)
        {
            target->grabMouse();
            QMouseEvent event(QEvent::MouseButtonPress, QPointF(), Qt::LeftButton,  QGuiApplication::mouseButtons(), QGuiApplication::keyboardModifiers());
            QGuiApplication::sendEvent(target, &event);
        }
    }

    static void ungrabMouse(QQuickItem* target)
    {
        if (target)
            target->ungrabMouse();
    }

    QQuickItem* m_target;
    bool m_active;
};

#endif // MOUSEGRABBER

通过直接调用插槽而不是操纵礼节可以使这更方便，但这就是我的库存。例如，一个名为grabMouseUntilRelease(QQuickItem* item)的插槽，用于抓取此项目的鼠标，使用installEventFilter侦听鼠标释放事件并自动取消它。

注册该类，以便可以在QML中实例化qmlRegisterType代码中的某个位置：

qmlRegisterType<MouseGrabber>("com.mycompany.qmlcomponents", 1, 0, "MouseGrabber");

之后，您可以在QML中实例化MouseGrabber并通过修改其属性（target和active）来使用它：

QML

import com.mycompany.qmlcomponents 1.0

Window {
    id: window
    width: 300
    height: 300

    Rectangle {
        id: base
        width: 20
        height: 20

        color: "red"

        MouseArea {
            anchors.fill: parent

            property var lastPoint
            property var draggedObj: null

            function vecLength( vec ) {
                return Math.abs( Math.sqrt( Math.pow( vec.x, 2 ) +
                                           Math.pow( vec.y, 2 ) ) );
            }

            onPressed: lastPoint = Qt.point( mouse.x, mouse.y )
            onPositionChanged: {
                if ( !draggedObj ) {
                    var diff = Qt.point( mouse.x - lastPoint.x,
                                        mouse.y - lastPoint.y );
                    if ( vecLength( diff ) > 4 ) {
                        draggedObj = dragObj.createObject( window );
                        grabber.target = draggedObj.dragArea; // grab the mouse
                    }
                }

                mouse.accepted = !draggedObj;
            }
        }
    }
    MouseGrabber {
        id: grabber
    }

    Component {
        id: dragObj

        Rectangle {
            property alias dragArea: dragArea
            width: 20
            height: 20

            color: "blue"

            Drag.active: dragArea.drag.active
            Drag.hotSpot.x: 10
            Drag.hotSpot.y: 10

            MouseArea {
                id: dragArea
                anchors.fill: parent
                drag.target: parent
                onReleased: {
                    if (grabber.target === this)
                        grabber.target = null; // ungrab the mouse
                }
            }
        }
    }
}

Answer 2

我的另一个答案是过度设计。您无需在您的情况下窃取鼠标事件，您只想在onPositionChanged处理程序（或使用Binding或直接在Rectangle组件内）更新拖动的蓝色矩形的位置。

在MouseArea中进行此操作就足够了：

onPositionChanged: {
    if ( !draggedObj ) {
        var diff = Qt.point( mouse.x - lastPoint.x,
                             mouse.y - lastPoint.y );
        if ( vecLength( diff ) > 4 ) {
            draggedObj = dragObj.createObject( window );
        }
    } else { //update the position of the dragged rectangle
        draggedObj.x = mouse.x - draggedObj.width/2;
        draggedObj.y = mouse.y - draggedObj.height/2;
    }
}

onReleased: draggedObj = null

QML：＆＃39;窃取＆＃39;来自动态MouseArea的事件

2 个答案:

`MouseGrabber.h`

QML