QML停靠窗口功能异常：初始拖动无法对齐鼠标光标

我基于现有代码扩展实现了类似Visual Studio的原生窗口停靠功能，支持拖拽标题栏使窗口跟随鼠标移动。目前拖拽取消窗口停靠功能正常，但初始拖动时窗口无法对齐鼠标光标，相关代码如下：

import QtQuick
import QtQuick.Controls 
import QtQuick.Window 
import QtQuick.Controls.Material

Item {
    id: root
    default property alias contents: placeholder.data
    property alias title: titleLabel.text
    implicitHeight: mainWindow.height - statusBar.height - 15
    
    Rectangle {
        
        id: content
        anchors.fill: parent       
        height: implicitHeight
        state: "docked"        
        border.color: "slategrey"
        border.width: 1
        ToolBar {         
            id: toolBar
            implicitHeight: 30
            Material.foreground: "white"
            Material.background: "#dcdcdc"            
            anchors { top: parent.top; left: parent.left; right: parent.right }            
            Label {
                id: titleLabel
                color: "black"
                anchors { left: parent.left; leftMargin: 8; verticalCenter: parent.verticalCenter }
            }
            
            MouseArea {
                id: dragMouseArea
                anchors.fill: parent
                acceptedButtons: Qt.LeftButton | Qt.RightButton
                property variant clickPos: "0,0"
                onPressed: (mouse) => {
                               clickPos = Qt.point(mouse.x,mouse.y)
                               if (content.state === "docked") {
                                   // Set the initial position of the window when undocked
                                   window.x = mouse.x
                                   window.y = mouse.y                        
                               }
                           }    
                
                onPositionChanged:  (mouse) => {
                                        var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
                                        var new_x = window.x + delta.x
                                        var new_y = window.y + delta.y
                                        
                                        if (content.state === "docked") {
                                            // Check if the mouse is outside the bounds of the docked area
                                            if (mouse.y < toolBar.height || mouse.x < 0 || mouse.x > parent.width) {
                                                content.state = "undocked"
                                                // Move the window to the mouse position
                                                window.x = new_x
                                                window.y = new_y
                                            }
                                        } else {
                                            // Get the maximum x and y positions for the undocked window
                                            var max_x = Screen.desktopAvailableWidth - window.width
                                            var max_y = Screen.desktopAvailableHeight - window.height
                                            
                                            // Update the window position, making sure it stays within the screen bounds
                                            if (new_x < 0) new_x = 0
                                            if (new_x > max_x) new_x = max_x
                                            if (new_y < 0) new_y = 0
                                            if (new_y > max_y) new_y = max_y
                                            
                                            window.x = new_x
                                            window.y = new_y
                                        }
                                    }
                
                onClicked: {
                    if (mouse.button === Qt.RightButton)
                        contextMenu.popup()
                }
                
                Menu {
                    id: contextMenu
                    MenuItem { id: dockMenu; text: "Dock"; onClicked: content.state = "docked"; implicitHeight: 30}
                    MenuItem { id: unDockMenu; text: "Float"; onClicked: content.state = "undocked" ; implicitHeight: 30}  
                }
            }           
            
        }
        Item {
            id: placeholder
            anchors { top: toolBar.bottom; left: parent.left; right: parent.right; bottom: parent.bottom }
        }
        states: [
            State {
                name: "undocked"
                PropertyChanges { target: root; height: 0 }
                PropertyChanges { target: window; visible: true }
                ParentChange { target: content; parent: undockedContainer }
                PropertyChanges {target: navigationWindow; width: 0 }
                PropertyChanges {target: toolBar; Material.background: "#f0e68c" }
                PropertyChanges {target: unDockMenu; enabled: false }
                PropertyChanges {target: dockMenu; enabled: true } 
            },
            State {
                name: "docked"
                PropertyChanges { target: root; height: implicitHeight }
                PropertyChanges { target: window; visible: false }
                ParentChange { target: content; parent: root }
                PropertyChanges {target: unDockMenu; enabled: true }
                PropertyChanges {target: dockMenu; enabled: false } 
            }
        ]
    }
    Window {
        id: window
        width: 250;
        height: 700;
        
        flags: Qt.Window | Qt.CustomizeWindowHint
        
        Item {         
            id: undockedContainer
            anchors.fill: parent
        }
        
        onClosing: {
            content.state = "docked"
        }
        
    }
}

问题原因 #

1. 坐标体系混淆：onPressed中使用的mouse.x/mouse.y是ToolBar的局部坐标，不是屏幕全局坐标，直接赋值给window.x/window.y会导致窗口位置偏离鼠标实际位置。
2. 初始偏移未计算：切换到undocked状态时，没有考虑鼠标点击位置在标题栏内的偏移量，窗口左上角直接对齐鼠标坐标，而非保持鼠标在标题栏上的相对位置。

解决方案 #

1. 在onPressed中记录鼠标的全局屏幕坐标，以及点击位置相对于标题栏的局部偏移。
2. 切换undocked状态时，用鼠标全局坐标减去局部偏移量，作为窗口的初始位置，确保窗口跟随鼠标点击点移动。

修改后的关键代码 #

MouseArea {
    id: dragMouseArea
    anchors.fill: parent
    acceptedButtons: Qt.LeftButton | Qt.RightButton
    // 记录鼠标点击的全局坐标和局部偏移
    property point globalClickPos: Qt.point(0, 0)
    property point localClickPos: Qt.point(0, 0)

    onPressed: (mouse) => {
        localClickPos = Qt.point(mouse.x, mouse.y)
        globalClickPos = Qt.point(mouse.globalX, mouse.globalY)
        if (content.state === "docked") {
            // 预计算窗口初始位置：全局坐标 - 局部偏移
            window.x = globalClickPos.x - localClickPos.x
            window.y = globalClickPos.y - localClickPos.y
        }
    }    

    onPositionChanged:  (mouse) => {
        if (content.state === "docked") {
            // 检测是否触发取消停靠
            if (mouse.y < toolBar.height || mouse.x < 0 || mouse.x > parent.width) {
                content.state = "undocked"
                // 重新计算窗口位置，确保对齐鼠标
                const currentGlobalPos = Qt.point(mouse.globalX, mouse.globalY)
                window.x = currentGlobalPos.x - localClickPos.x
                window.y = currentGlobalPos.y - localClickPos.y
            }
        } else {
            // 拖动浮动窗口时，基于全局坐标计算偏移
            const deltaX = mouse.globalX - globalClickPos.x
            const deltaY = mouse.globalY - globalClickPos.y
            let new_x = window.x + deltaX
            let new_y = window.y + deltaY
            
            // 屏幕边界限制
            const max_x = Screen.desktopAvailableWidth - window.width
            const max_y = Screen.desktopAvailableHeight - window.height
            
            new_x = Math.max(0, Math.min(new_x, max_x))
            new_y = Math.max(0, Math.min(new_y, max_y))
            
            window.x = new_x
            window.y = new_y
            
            // 更新全局点击坐标，用于下一次偏移计算
            globalClickPos = Qt.point(mouse.globalX, mouse.globalY)
        }
    }
}

改动说明 #

• 将原clickPos拆分为globalClickPos（鼠标全局坐标）和localClickPos（标题栏内的局部坐标），明确区分两种坐标体系。
• 初始设置窗口位置时，用全局坐标 - 局部偏移，保证鼠标点击标题栏的位置始终是窗口的“拖动锚点”。
• 浮动窗口拖动时，基于全局坐标计算偏移，避免局部坐标带来的位置误差。
• 优化了边界限制的写法，使用Math.max/Math.min让代码更简洁。

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