QML练习---1，切换多层窗口

任务

在主窗口中定义一个按键，点击后会弹出子窗口A，子窗口A中有退出按键，点击生成模态消息框B，里面有两个按键分别是确定退出和取消退出。

实现

主窗口：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
Window {
    id: mainWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    M_Dialog {
        id: m_dialog
    }
    Button {
        id: btn_dialog
        width: 200
        height: 150
        anchors.centerIn: parent
        Text {
            anchors.centerIn: parent
            text: "打开消息框"
            font.pixelSize: 20
        }
        onClicked: {
            m_dialog.show()
            mainWindow.hide()
        }
    }
    Connections {
        target: m_dialog
        function onBack() {
            mainWindow.show()
            m_dialog.hide()
        }
    }
    Component.onDestruction: console.log("over")
}

子窗口A

import QtQuick 2.0
import QtQuick.Window 2.14
import QtQuick.Controls 2.5
Window {
    id: dialog
    width: 500
    height: 300
    title: "MyDialog"
    signal back()
    M_MessageBox {
        id: m_messageBox
    }
    Button {
        id: btn_close
        width: 80
        height: 40
        anchors.centerIn: parent
        Text {
            anchors.centerIn: parent
            font.pixelSize: 20
            text: "退回"
        }
        onClicked: {
            m_messageBox.show()
        }
    }
    Connections {
        target: m_messageBox.btn_ensure
        function onEnsured() {
            m_messageBox.hide()
            back()
        }
    }
    Connections {
        target: m_messageBox.btn_exit
        function onExited() {
            m_messageBox.hide()//用hide不要用close，用close直接全关
        }
    }
}

子窗口B

import QtQuick 2.0
import QtQuick.Window 2.14
import QtQuick.Controls 2.0
Window {
    id: messageBox
    width: 250
    height: 100
    modality: Qt.WindowModal
    property alias btn_ensure: btn_ensure
    property alias btn_exit: btn_exit
    Button {
        id: btn_ensure
        width: 100
        height: 50
        anchors.left: parent.left
        anchors.leftMargin: 20
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        Text {
            anchors.centerIn: parent
            text: "ensure"
        }
        signal ensured()
        onClicked: {
            console.log("MessageBox ensure")
            ensured()
        }
    }
    Button {
        id: btn_exit
        width: 80
        height: 50
        anchors.right: parent.right
        anchors.rightMargin: 20
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        Text {
            anchors.centerIn: parent
            text: "exit"
        }
        signal exited()
        onClicked: {
            console.log("MessageBox exit")
            exited()
        }
    }
    // @disable-check M16
    onClosing: function(closeevent){
        //CloseEvent的accepted设置为false就能忽略该事件
        closeevent.accepted = false
        this.hide()
    }
}

注意事项

对于多层窗口，关闭子窗口不能使用close()或者Qt.quit()函数，否则会使整个程序关闭，可以使用hide()函数来隐藏当前窗口控件，想要使用时再用show()函数进行显现。

对于子窗口中的子控件属性，若要调用可以使用.children[]进行索引，子控件从上到下顺序按照0-n排列在children中，也可以在自定义子窗口中对子控件起别名如对子窗口A中的按键取别名：

    property alias btn_ensure: btn_ensure
    property alias btn_exit: btn_exit

对于点击窗口右上角的❌，在有些子窗口中如此操作会导致整个程序关闭，就如上方程序点击子窗口B中的❌会使程序退出，而A窗口却只会隐藏自己，具体原因不清楚。解决方案可以通过重写函数onClosing，如下（有时编译器会提示语法错误，实际上没有错，在该代码行上方加入
                                                        // @diasble-check M16
可以解决）

    onClosing: function(closeevent){
        //CloseEvent的accepted设置为false就能忽略该事件
        closeevent.accepted = false
        this.hide()//隐藏该窗口但不关闭程序
    }