QML中MouseArea与Toolbar冲突：无法调整窗口顶部边缘大小

核心原因 #

Toolbar组件（及其内部的DragHandler）拦截了顶部区域的鼠标事件，导致负责窗口resize的底层MouseArea无法接收这些区域的鼠标输入，因此无法触发边缘resize操作。Qt 6.4的卡顿则是由事件冲突引发的重复处理导致。

修复步骤 #

• 调整负责resize的MouseArea层级，让它处于Toolbar上方，确保能捕获全窗口的鼠标事件
• 在MouseArea中判断，当鼠标不在边缘区域时，将事件透传给下方的Toolbar，保证窗口拖动功能正常
• 优化resize逻辑，避免不必要的重复计算

修复后的完整代码 #

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    id: window
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    flags: Qt.FramelessWindowHint | Qt.Window

    // 负责窗口resize的MouseArea，置于最顶层
    MouseArea{
        id: resizeArea
        anchors.fill: parent
        hoverEnabled: true
        acceptedButtons: Qt.LeftButton
        propagateComposedEvents: true
        z: 1  // 确保在Toolbar上方
        property int edges: 0
        property int edgeOffset: 5

        function setEdges(x,y){
            edges = 0;
            if (x < edgeOffset) edges |= Qt.LeftEdge;
            if (x > (width - edgeOffset)) edges |= Qt.RightEdge;
            if (y < edgeOffset) edges |= Qt.TopEdge;
            if (y > (height - edgeOffset)) edges |= Qt.BottomEdge;
        }

        cursorShape: {
            return !containsMouse ? Qt.ArrowCursor:
                                    edges == 3 || edges == 12 ? Qt.SizeFDiagCursor :
                                    edges == 5 || edges == 10 ? Qt.SizeBDiagCursor :
                                    edges & 9 ? Qt.SizeVerCursor :
                                    edges & 6 ? Qt.SizeHorCursor : Qt.ArrowCursor;
        }

        onPositionChanged: setEdges(mouseX, mouseY);
        onPressed: {
            setEdges(mouseX, mouseY);
            if(edges && containsMouse){
                window.startSystemResize(edges);
            } else {
                // 非边缘区域，传递事件给下方的Toolbar
                mouse.accepted = false;
            }
        }
    }

    ColumnLayout{
        width: parent.width
        height: 50

        ToolBar{
            Layout.fillHeight: true
            Layout.fillWidth: true

            // 窗口拖动逻辑
            DragHandler{
                onActiveChanged: if(active) window.startSystemMove()
            }

            RowLayout{
                Layout.fillWidth: true
                Layout.fillHeight: true
                ToolButton{
                    text: "+"
                    onClicked: console.log("Hello World")
                }
                Label{
                   text: "title"
                   horizontalAlignment: Qt.AlignHCenter
                   verticalAlignment: Qt.AlignVCenter
                   Layout.fillWidth: true
                }
                ToolButton{
                    text: "x"
                    onClicked: close()
                }
            }
        }
    }
}

额外优化（解决Qt 6.4卡顿） #

• 通过mouse.accepted = false明确传递非边缘事件，减少DragHandler与MouseArea的事件冲突
• 保留hoverEnabled的同时，确保setEdges仅在鼠标移动或按下时触发，避免冗余计算

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