QML如何点击按钮弹出新的qml窗口

原创已于 2024-09-27 08:58:36 修改 · 899 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #开发语言

于 2024-07-23 16:02:30 首次发布

QML 专栏收录该内容

14 篇文章

订阅专栏

主窗口qml文件,文件名称Main.qml

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是窗口A文件名称
    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，文件名称 M_Dialog

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 是窗口B文件名称
    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,文件名称 M_MessageBox

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()
        }
    }
    
    onClosing: function(closeevent){
        //CloseEvent的accepted设置为false就能忽略该事件
        closeevent.accepted = false
        this.hide()
    }
}