QML 鼠标区域在不同区域受到影响

Question

我在

Window

中创建了一个无框架

QML

，并添加了多个

MouseArea

和用于移动和调整其大小的事件处理程序。
最初，我只创建了移动区域和部分调整大小区域作为示例。

但是，当我开始时，我注意到 4 个区域中只有 3 个区域触发了事件，而且它们似乎是交叉的，尽管没有重叠。
光标也改变在正确的位置。

此问题在 Linux 和 Windows 上均出现。

不同

MouseArea

的活动区域相交（尽管它们不应该相交）的原因可能是什么？

为了调试，我为每个

Rectangle

添加了彩色

MouseArea

并增加了它们的大小。”

我还在 Google 云端硬盘上上传了 示例视频。

MyWin.qml

import QtQuick 6.2
import QtQuick.Controls 6.2

Window {
    id: win
    width: 200
    height: 100
    flags: Qt.FramelessWindowHint | Qt.Window
    property alias topPanel: topPanel

    Rectangle {
        anchors.fill: parent
        color: "#610161"

        Rectangle {
            id: topPanel
            z: 0
            height: 30
            color: "#4c4c4c"
            border.width: 0
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.rightMargin: 0
            anchors.leftMargin: 0
            anchors.topMargin: 0

            ActionButton {
                id: close
                width: 20
                height: 20
                anchors.right: parent.right
                anchors.top: parent.top
                z: 10
                image: "icons/close.svg"
                anchors.topMargin: 5
                anchors.rightMargin: 5
                backColor: "#00000000"

                Connections {
                    function onClicked() {
                        win.close()
                    }
                }
            }
        }
        MouseArea {
            id: moved
            z: 2

            Rectangle {
                anchors.fill: parent
                z: 32
                color: "#6a30e4"
            }

            property real lastX: 0
            property real lastY: 0
            x: 35
            y: 0
            anchors.left: lt.right
            anchors.right: topPanel.right
            anchors.top: topPanel.top
            anchors.bottom: topPanel.bottom
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.topMargin: 0
            anchors.leftMargin: 0
            Connections {
                target: moved
                function onPressed(mouse) {
                    console.debug("Pressed move", mouse.x, mouse.y, "MOVED:",
                                  moved.x, moved.y, "|", moved.width, "x",
                                  moved.height)
                    moved.lastX = mouse.x
                    moved.lastY = mouse.y
                    mouse.accepted = true
                }
                function onPositionChanged(mouse) {
                    mouse.accepted = true
                    let dx = (mouse.x - moved.lastX)
                    let dy = (mouse.y - moved.lastY)
                    console.debug("move dx:", dx, " dy:", dy, " mouse:",
                                  mouse.x, mouse.y, mouse.modifiers)
                    win.x += dx
                    win.y += dy
                }
            }
        }

        MouseArea {
            id: lbord
            z: 2
            width: 5
            anchors.top: lt.bottom
            anchors.left: parent.left
            anchors.bottom: lb.top
            anchors.topMargin: 0

            Rectangle {
                color: "#43ca28"
                anchors.fill: parent
                z: 32
            }
            property real lastX: 0
            property real lastY: 0
            Connections {
                target: lbord
                function onPressed(mouse) {
                    console.debug("Pressed lbord")
                    lbord.lastX = mouse.x
                }
                function onPositionChanged(mouse) {
                    let dx = (mouse.x - lbord.lastX)
                    console.debug("lbord dx:", dx, " lastX:", lbord.lastX,
                                  " mouse:", mouse.x, mouse.y)
                    win.x += dx
                    win.width -= dx
                    //                    lbord.lastX += dx
                }
            }
        }
        MouseArea {
            id: lb
            z: 2
            width: 15
            height: 15
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            Rectangle {
                color: "#28cac7"
                anchors.fill: parent
                z: 32
            }

            property real lastX: 0
            property real lastY: 0
            Connections {
                target: moved
                function onPressed(mouse) {
                    console.debug("Pressed lb", mouse.x, mouse.y, "LB:", lb.x,
                                  lb.y, "|", lb.width, "x", lb.height)
                    lb.lastX = mouse.x
                    lb.lastY = mouse.y
                }
                function onPositionChanged(mouse) {
                    let dx = (mouse.x - lb.lastX)
                    let dy = (mouse.y - lb.lastY)
                    console.debug("lb dx:", dx, " dy:", dy, " mouse:", mouse.x,
                                  mouse.y, mouse.modifiers)
                    win.x += dx
                    win.y += dy
                    win.width -= dx
                    win.height += dy
                }
            }
        }
        MouseArea {
            id: lt
            z: 2
            width: 35
            height: 35
            anchors.left: parent.left
            anchors.top: parent.top
            cursorShape: Qt.SizeFDiagCursor
            Rectangle {
                color: "#eb1892"
                anchors.fill: parent
                z: 32
            }

            property real lastX: 0
            property real lastY: 0
            Connections {
                target: moved
                function onPressed(mouse) {
                    console.debug("Pressed lt", mouse.x, mouse.y, "LT:", lt.x,
                                  lt.y, "|", lt.width, "x", lt.height)
                    lt.lastX = mouse.x
                    lt.lastY = mouse.y
                }
                function onPositionChanged(mouse) {
                    let dx = (mouse.x - lt.lastX)
                    let dy = (mouse.y - lt.lastY)
                    console.debug("lt dx:", dx, " dy:", dy, " mouse:", mouse.x,
                                  mouse.y, mouse.modifiers)
                    win.x += dx
                    win.y += dy
                    win.width -= dx
                    win.height -= dy
                }
            }
        }
    }
}

显示错误的视频 Google Drive

Answer 1

您的信号处理函数在 4 个

Connections

对象中的 3 个中被触发，因为您为其中 3 个分配了相同的

target

。

您甚至不必使用

Connections

，因为您是实例化

MouseArea

的人：

MouseArea {
    id: mouseArea
    Connections {
        target: mouseArea
        function onPressed(mouse) { ... }
    }
}

相当于

MouseArea {
    onPressed(mouse) { ... }
}

我还建议使用 startSystemMove 和 startSystemResize。