QML 多页面切换

利用 Loader 实现不同页面的动态切换，效果如下：

---

---

 1，加载默认页面  Component.onCompleted: showMainPage()

 2，定义  加载页面函数

    function showGeneralSettingsPage()//常规设置
    {
        panelLoader.setSource("qrc:/qml/GeneralSettings.qml")
    }

    function showLinkPage()//连接设置
    {
         panelLoader.setSource("qrc:/qml/LinkSettings.qml")
    }

 

  3，不同 按钮按下后，调用 不同函数

 onClicked: {
        showLinkPage()
}

 

import QtQuick 2.0
import QGroundControl.FlightDisplay         1.0
import QtQuick.Layouts 1.3
import QGroundControl                       1.0
import QGroundControl.AutoPilotPlugin       1.0
import QGroundControl.Palette               1.0
import QGroundControl.Controls              1.0
import QGroundControl.ScreenTools           1.0
import QGroundControl.MultiVehicleManager   1.0
import QmlNew 1.0


Rectangle {
    id:root

    function showGeneralSettingsPage()//常规设置
    {
        panelLoader.setSource("qrc:/qml/GeneralSettings.qml")
    }

    function showLinkPage()//连接设置
    {
         panelLoader.setSource("qrc:/qml/LinkSettings.qml")
    }
    function showMainPage()//主页面
    {
        panelLoader.setSourceComponent(mainPage)
    }

    Component.onCompleted: showMainPage()//默认加载首页

    //头
    Rectangle{
        id:headRect
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        height: 60
        color: "black"
        opacity: 0.8
        GFToolBtn {
            id: btnBack
            anchors.left: parent.left
            height: 50
            width: 50
            index:0
            picSrc: "qrc:///QmlNewRes/settingBack.svg"
            onClicked:
            {
                showMainPage()
            }
        }

        Text{
            id:normal
            wrapMode: Text.WordWrap
            font.bold: true
            font.pixelSize: 30
            text: "设置"
            anchors.centerIn: parent
            color: "white"
        }
    }

    //主页面
    Component{
        id:mainPage
        Rectangle{
            id:rect01;
            anchors.fill: parent
            color: "black";
            Layout.fillWidth: true
            Layout.fillHeight: true
            RowLayout{
                anchors.fill: parent
                anchors.margins: 5
                GFToolBtn {//常规设置
                    id: generalSettingBtn
                    width: parent.width/3
                    height: parent.height
                    index:0
                    picSrc: "qrc:///QmlNewRes/land.svg"
                    onClicked:
                    {
                        showGeneralSettingsPage()
                    }
                }
                GFToolBtn {//连接设置
                    id: linkBtn
                    width: parent.width/3
                    height: parent.height
                    index:0
                    picSrc: "qrc:///QmlNewRes/land.svg"
                    onClicked:
                    {
                       showLinkPage()
                    }
                }

                GFToolBtn {//连接设置
                    id: linkBtn2
                    width: parent.width/3
                    height: parent.height
                    index:0
                    picSrc: "qrc:///QmlNewRes/land.svg"
                    onClicked:
                    {
                       showLinkPage()
                    }
                }
            }
        }
    }

    Loader {
        id:       panelLoader
        anchors.top: headRect.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom

        function setSource(source, vehicleComponent) {
            panelLoader.vehicleComponent = vehicleComponent
            panelLoader.source = source
        }

        function setSourceComponent(sourceComponent, vehicleComponent) {
            panelLoader.vehicleComponent = vehicleComponent
            panelLoader.sourceComponent = sourceComponent
        }

        property var vehicleComponent
    }
}

参考：https://blog.csdn.net/zusi_csdn/article/details/80546853

 

关注微信获得更多精彩内容