QML之自定义模态可拖拽窗口

效果

代码

main.qml

import QtQuick 2.5
import Qt.labs.controls 1.0

ApplicationWindow {
    id: root
    visible: true
    width: 840
    height: 680
    title: qsTr("Hello World")

    Button{
        id: btn
        anchors.centerIn: parent
        text: "click"
        onClicked: {
            myDlg.open()
            myDlg.x = parent.width/2 - myDlg.width/2
            myDlg.y = parent.height/2 - myDlg.height/2
        }
    }

    MyDialog{
        id: myDlg
    }
}

MyDialog.qml

import QtQuick 2.0
//Qt5.6之前版本Popop包含在Qt Labs Controls模块中，之后版本Popop包含在Qt Quick Controls模块中
import Qt.labs.controls 1.0

Popup {
    id: root
    x: parent.width/2 - root.width/2
    y: parent.height/2 - root.height/2
    width: 530
    height: 300
    modal: true
    focus: true
    //设置窗口关闭方式为按“Esc”键关闭
    closePolicy: Popup.OnEscape
    //设置窗口的背景控件，不设置的话Popup的边框会显示出来
    background: rect

    Rectangle {
        id: rect
        anchors.fill: parent
        color: "#87C056"
        border.width: 2
        opacity: 1
        radius: 8

        Rectangle{
            width: parent.width-4
            height: 2
            anchors.top: parent.top
            anchors.topMargin: 40
            anchors.left: parent.left
            anchors.leftMargin: 2
            radius: 8
        }

        //设置标题栏区域为拖拽区域
        Text {
            width: parent.width
            height: 40
            anchors.top: parent.top
            text: qsTr("标题栏")
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter

            MouseArea {
                property point clickPoint: "0,0"

                anchors.fill: parent
                acceptedButtons: Qt.LeftButton
                onPressed: {
                    clickPoint  = Qt.point(mouse.x, mouse.y)
                }
                onPositionChanged: {
                    var offset = Qt.point(mouse.x - clickPoint.x, mouse.y - clickPoint.y)
                    setDlgPoint(offset.x, offset.y)
                }
            }
        }

        Label {
            x: 189
            y: 128
            width: 171
            height: 15
            text: qsTr("AAAAAAAAAAAAAAAAAAA")
        }

        Button {
            x: 103
            y: 204
            text: "ok"
            onClicked: {
                root.close()
            }
        }

        Button {
            x: 341
            y: 204
            text: qsTr("cancel")
            onClicked: {
                root.close()
            }
        }
    }

    function setDlgPoint(dlgX ,dlgY)
    {
        //设置窗口拖拽不能超过父窗口
        if(root.x + dlgX < 0)
        {
            root.x = 0
        }
        else if(root.x + dlgX > root.parent.width - root.width)
        {
            root.x = root.parent.width - root.width
        }
        else
        {
            root.x = root.x + dlgX
        }
        if(root.y + dlgY < 0)
        {
            root.y = 0
        }
        else if(root.y + dlgY > root.parent.height - root.height)
        {
            root.y = root.parent.height - root.height
        }
        else
        {
            root.y = root.y + dlgY
        }
    }
}