[基础]qml跳转的方法

直接window.show()

//main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Flow{
        id:test
        spacing: 10
        Button{
            text: qsTr("打开window")
            onClicked: {
                openWindowPanel.show()
            }
        }
        Button{
            text: qsTr("打开Item")
            onClicked: {
                myloader.sourceComponent=openItemPanel
            }
        }
    }

    OpenWindow{
        id:openWindowPanel
    }

    Component{
        id:openItemPanel
        OpenItem{
            width: 300
            height: 200
            anchors.centerIn: parent
        }
    }

    Loader{
        id:myloader
    }
}

//OpenWindow.qml
import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 200
    height: 200
    title: qsTr("test1")
}

//OpenItem.qml
import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    width: 200
    height: 200
    Label{
        text: qsTr("打开item")
    }
}

如果要打开的这个页面是窗体Window，使用window的id.show()的方法可以打开新窗口

如果打开的这个页面是个组件，比如Item ，Rectangle之类的，就可以使用Loader或者createComponent

在这个例子中，使用的不是动态加载组件，是提前就实例化好了组件，然后定义loader，设置loaderid的sourceComponent方法实现显示组件，但看下面的图会发现加载的这个组件可以出现，但原来的内容还在，而且你点原来的两个按钮还能用！

解决方法：

//OpenItem.qml
import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    width: 200
    height: 200
    Label{
        text: qsTr("打开item")
    }
    //在新页面新建一个按键区域屏蔽掉底层的按钮
    //MouseArea{anchors.fill: parent} //为了屏蔽底层界面的鼠标事件
    MouseArea{
        anchors.fill: parent
    }
}

如上面改了后会发现组件出现的时候，点底层的按钮没反应了，这达到了我们的效果，但是组件内容和底层内容还是同时都在

//main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Flow{
        id:test
        spacing: 10
        Button{
            text: qsTr("打开window")
            onClicked: {
                openWindowPanel.show()
            }
        }
        Button{
            text: qsTr("打开Item")
            onClicked: {
                test.visible=false //当弹出新组件时，底层内容还是显示，所以设置底层内容不可见或者使用底层内容的外层框id的destroy方法
                //或者下面这一行
                test.destroy()
                myloader.sourceComponent=openItemPanel
            }
        }
    }

    OpenWindow{
        id:openWindowPanel
    }

    Component{
        id:openItemPanel
        OpenItem{
            width: 300
            height: 200
            anchors.centerIn: parent
        }
    }

    Loader{
        id:myloader
    }
}

使用Loader动态加载qml组件

上面的例子不是动态加载，是事先在main中实例化了组件，下面这两种是动态加载

Button {
                text: qsTr("button2")
                onClicked: {
                    console.log("=============================load Sub2Window====")
                    var sub2Params = {
                        "strText":  qsTr("Loader对象"),
                        "strColor": "red"
                    }
                    loadWindow.setSource("qrc:/Sub2Window.qml", sub2Params)
                    loadWindow.item.show()
                }
            }
            

利用 createComponent 创建并切换

Button {
                text: qsTr("button1")
                onClicked: {
                    console.log("=============================Qt.createComponent")
                    var component = Qt.createComponent("qrc:/Sub1Window.qml");
                    if (component.status === Component.Ready){
                        var subParams = {
                            "strText":  qsTr("创建对象"),
                            "strColor": "red"
                        }
                        var sub1Popup = component.createObject(mainWindow, subParams);
                        sub1Popup.show();
                    }
                }
            }

参考：CCDemo中的lesson1