QML-Popup控件

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    color: "white"
    title: qsTr("My QML")
    visible: true

    Button{
        width: 50
        height: 50
        onClicked: {
            //关闭popup使得popup的visible为false
            popup.close()
            //反之打开popup使得popup的visible为true
            //popup.open()
        }
    }
    //类似Rectangle
    Popup{
        id: popup
        x: 100
        y:100
        width: 200
        height: 300
        visible: true
    }
}

  //Rectangle 与 Popup 区别是自己的visible显示独立于父窗口
    
    Rectangle{
        width: 200
        height: 100
        color: "black"
        visible: false
        //Rectangle的子Rectangle
        //这个不会显示
        Rectangle{
            width: 50
            height: 50
            color: "red"
        }
    }
    Rectangle{
        x:200
        y:100
        width: 100
        height: 100
        color: "black"
        visible: false
        //Rectangle的子Popup
        //这个会显示
        Popup{
            width: 50
            height: 50
            visible: true
        }
    }

    //z高Rectangle
    Rectangle{
        z:999
        width: 200
        height: 100
        color: "black"
    }
    //z低Rectangle
    Rectangle{
        x:100
        z:0
        width: 200
        height: 100
        color: "red"
    }
    //z永远大于Rectangle，Popup永远能覆盖Rectangle但是Popup之间可以被相互覆盖
    Popup{
        x:100
        z:-9999
        width: 100
        height: 100
        visible: true
    }

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Popup {
    width: 640
    height: 480
    visible: true

    Button{
        width: 50
        height: 50
        onClicked: {
            popup.close()
        }
    }
    Popup {
        id:popup
        x:100
        y:100
        z:0
        width: 500
        height: 400
        visible: true
        //不会自动关闭
//        closePolicy: Popup.NoAutoClose
        //默认关闭策略 点击空白或点击esc键
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
        //模态true 非模态false
        modal: false
        //非模态对话框的背景是否需要设置 false无效果 true 浅色
        dim:true
        //open时淡入
        enter: Transition {
            NumberAnimation {
                property: "opacity"
                from: 0.0;
                to: 1.0;
                duration:1000;
            }
        }
        //close时淡出
        exit: Transition{
            NumberAnimation {
                property: "opacity"
                from: 1.0;
                to: 0.0;
                duration:1000;
            }
        }

        //覆盖背景和文本，带淡入淡出属性
        contentItem: Rectangle{
            anchors.fill: parent
            //背景
            color: "grey"
            Text {
                id: name
                anchors.fill:parent
                text:qsTr("Message Box Area!!!!!!!!!")
                font.pixelSize: 26
                wrapMode: Text.WordWrap

            }
        }
        Button{
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 30
            anchors.right: parent.right
            anchors.rightMargin: 30
            text: "cancel"

        }

    }
    //模态除了Popup外的颜色
    Overlay.modal:Rectangle{
        anchors.fill: parent
        color: "#33000000"
    }
    //非模态除了Popup外的颜色
    Overlay.modeless:Rectangle{
        anchors.fill: parent
        color: "blue"
    }
}