qml 鼠标按下时鼠标移动答案

【问题标题】：qml mouse move while mouse pressedqml 鼠标按下时鼠标移动
【发布时间】：2018-02-28 01:04:48
【问题描述】：

我有两个矩形，我希望它们在按下鼠标按钮移动鼠标时相互发送鼠标事件。看我的例子

Rectangle {
    x: 100
    width: 30
    height: 30
    color: "red"
    MouseArea {
        hoverEnabled: true
        propagateComposedEvents: true

        anchors.fill: parent
        onMouseXChanged: console.log("red changed" + mouseX)
    }
}

Rectangle {
    x: 130
    width: 30
    height: 30
    color: "green"
    MouseArea {
        hoverEnabled: true
        propagateComposedEvents: true

        anchors.fill: parent
        onMouseXChanged: console.log("green changed"+ mouseX)
    }
}

当我在矩形之间移动鼠标时一切正常。但是当我尝试按下鼠标按钮然后移动时 - 只有一个矩形接收事件。有没有办法让它在按下按钮的情况下工作？

附：当然，最初的问题不在于矩形。我试图让组合框更快地工作，当您只需按一下即可打开弹出窗口并将光标移动到您要选择的项目。但我可以找到一种方法将按下事件从组合框输入移动到弹出窗口。我认为我上面展示的示例是理解问题的正确示例。

【问题讨论】：

标签： qt qml mouseevent

【解决方案1】：

问题是一旦按下按钮，MouseArea 就会保存鼠标事件even if we move outside the area。那么另一个MouseArea就无法捕捉到鼠标事件了。

我能想象的唯一解决方案是全局管理位置变化，以便每个MouseArea 接收来自任何其他MouseArea 的positionChange 信号，并单独决定是否需要采取行动（参见mapFromItem用于位置映射）：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    width: 500
    height: 500

    signal globalPositionChanged(var item, var position)

    Rectangle {
        id: rect1
        x: 100
        width: 30
        height: 30
        color: "red"
        MouseArea {
            hoverEnabled: true
            propagateComposedEvents: true
            anchors.fill: parent
            clip: true

            onPositionChanged: {
                globalPositionChanged(rect1, mouse)
            }

            Component.onCompleted: {
                globalPositionChanged.connect(handlePositionChange)
            }

            function handlePositionChange(item, position) {
                var localPos = toLocalePosition(rect1, item, position)
                if (localPos) {
                    // we are in the red rectangle
                    console.log("red", localPos.x, localPos.y)
                }
            }
        }
    }

    Rectangle {
        id: rect2
        x: 130
        width: 30
        height: 30
        color: "green"
        MouseArea {
            hoverEnabled: true
            propagateComposedEvents: true
            clip: true
            anchors.fill: parent

            onPositionChanged: {
                globalPositionChanged(rect2, mouse)
            }

            Component.onCompleted: {
                globalPositionChanged.connect(handlePositionChange)
            }

            function handlePositionChange(item, position) {
                var localPos = toLocalePosition(rect2, item, position)
                if (localPos) {
                    // we are in the green rectangle
                    console.log("green", localPos.x, localPos.y)
                }
            }

        }
    }

    function toLocalePosition(toItem, fromItem, position) {
        // return the local position if inside item, or null if outside
        var localPos = toItem.mapFromItem(fromItem, position.x, position.y)
        if (localPos.x >= 0
                && localPos.y >= 0
                && localPos.x <= toItem.width
                && localPos.y <= toItem.height) {
            return localPos
        }
        return null
    }
}

我不是 100% 相信这个答案。可能有更好的方法可以做到这一点，但我认为它可以解决您的问题。

【讨论】：