创建可调整大小的 Qml 对话框

Question

我正在尝试制作一个可调整大小的对话框：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.12

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("Test")

    Dialog {
        id: dlg
        x: 10
        y: 10
        width: 100
        height: 100
        visible: true

        Rectangle {
            anchors.fill: parent
            color: "blue"
        }

        MouseArea {
            height: 40
            width: 40
            anchors.right: parent.right
            anchors.bottom: parent.bottom

            Rectangle {
                anchors.fill: parent
                color: "red"
            }

            property real startX: 0
            property real startY: 0
            property real startWidth: 0
            property real startHeight: 0

            onPressed: {
                startX = mouseX;
                startY = mouseY;

                startWidth = dlg.width;
                startHeight = dlg.height;
            }

            function fnc_updatePos() {
                if (pressed) {
                    var deltaX = mouseX-startX;
                    var deltaY = mouseY-startY;
                    dlg.width = startWidth + deltaX;
                    dlg.height = startHeight + deltaY;
                }
            }

            onPositionChanged: fnc_updatePos()
        }
    }
}

代码调整了对话框的大小，但对话框在拖动过程中闪烁。问题是鼠标区域是对话框的一部分。如何改进代码以正确缩放弹出对话框？

此致

Answer 1

我post回答而不是删除问题，以防万一有人遇到同样的问题。

mapToItem是解：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.12
ApplicationWindow {
    id: mainWindow
    width: 640
    height: 480
    visible: true
    title: qsTr("Test")

    Dialog {
        id: dlg
        x: 10
        y: 10
        width: 100
        height: 100
        visible: true

        Rectangle {
            anchors.fill: parent
            color: "blue"
        }

        MouseArea {
            height: 40
            width: 40
            anchors.right: parent.right
            anchors.bottom: parent.bottom

            Rectangle {
                anchors.fill: parent
                color: "red"
            }

            property real startX: 0
            property real startY: 0
            property real startWidth: 0
            property real startHeight: 0

            onPressed: {
                var pos = mapToItem(mainWindow.contentItem, mouseX, mouseY)
                startX = pos.x;
                startY = pos.y;

                startWidth = dlg.width;
                startHeight = dlg.height;
            }

            function fnc_updatePos() {
                if (pressed) {
                    var pos = mapToItem(mainWindow.contentItem, mouseX, mouseY)
                    //console.log(pos)
                    var deltaX = pos.x-startX;
                    var deltaY = pos.y-startY;
                    dlg.width = startWidth + deltaX;
                    dlg.height = startHeight + deltaY;
                }
            }

            onPositionChanged: fnc_updatePos()
        }
    }
}

创建可调整大小的 Qml 对话框

Creating a resizable Qml dialog

qt

qml

qtquick2

qtquickcontrols2