QML 界面切换

   有关qml 部分基础部分就写到这里了，非常的简单，后面不在记录基础的qml程序了，后期根据项目，在给大家讲解一些例子。

       首先是最简单的方式，静态界面，就是加载全部数据，只是不显示，然后按键显示。

效果图如下：

 点击按钮：

 LoginPage

import QtQuick 2.0
import QtQuick.Controls 2.3

Rectangle {
    width: 400
    height: 300
    color: "#051f58"
    radius: 8

    Button{
        text: "登录按钮"
        anchors.centerIn: parent;
        onClicked: {
            loginPage.visible = false;
            mainPage.visible = true;
        }
    }
}
           

 MainPage

import QtQuick 2.0
import QtQuick.Controls 2.3

Rectangle {
    color: "#498ff8"
    radius: 8

    Button {
        text: "主页面-返回按钮"
        anchors.centerIn: parent
        onClicked: {
           loginPage.visible = true
           mainPage.visible = false
       }
     }
}
           

 main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("比卡丘不皮")

    //
    MainPage{
        id:mainPage;
        width: 500;
        height: 350;
        visible: false; //设置“隐藏”
        anchors.centerIn: parent;
    }

    LoginPage{
        id:loginPage;
        width: 300;
        height: 200;
        anchors.centerIn: parent;
    }

}
           

 博客参考：

https://www.cnblogs.com/linuxAndMcu/p/13566502.html

使用StackView

 代码：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("比卡丘不皮")

    StackView{
        id:stack;
        anchors.centerIn: parent;
        width: 600;
        height: 300;
        property var home: null;

        Text {
            text: qsTr("Click the page first ");
            font.pointSize: 12;
            font.bold: true;
            color: "blue";
            anchors.centerIn: parent;
            MouseArea{
                anchors.fill: parent;
                onClicked: {
                    if(stack.depth == 0)
                    {
                        stack.push(page)
                    }
                }
            }
        }
    }

    Component{
        id:page
        Rectangle{
            color: Qt.rgba(Math.random()%255,Math.random()%255,Math.random()%255);

            Text {
                anchors.centerIn: parent;
                text:"depth - "+ stack.depth;
                font.pointSize: 12;
                font.bold: true;
                color: stack.depth <= 4 ? Qt.lighter(parent.color) : Qt.darker(parent.color);
            }


            Button{
                id:next;
                anchors.right: parent.right;
                anchors.bottom: parent.bottom;
                anchors.margins: 8;
                text: "Next";
                width: 70;
                height: 30;
                onClicked: {
                    if(stack.depth <8)
                    {
                        stack.push(page)
                    }
                }

            }

            Button {
                id: back;
                anchors.right: next.left;
                anchors.top: next.top;
                anchors.rightMargin: 8;
                text: "Back";
                width: 70;
                height: 30;
                onClicked: {
                    if(stack.depth > 0) stack.pop();
                }
            }

            Button {
                id: home;
                anchors.right: back.left;
                anchors.top: next.top;
                anchors.rightMargin: 8;
                text: "Home";
                width: 70;
                height: 30;
                onClicked: {
                    if(stack.depth > 0)stack.pop(stack.initialItem);
                }
            }

            Button {
                id: clear;
                anchors.right: home.left;
                anchors.top: next.top;
                anchors.rightMargin: 8;
                text: "Clear";
                width: 70;
                height: 30;
                onClicked: {
                    if(stack.depth > 0)stack.clear();
                }
            }

        }
    }



}
           

 代码参考：

https://blog.csdn.net/foruok/article/details/46839569

这个博客也是 qt  quick 核心编程 的作者，喜欢qml的小伙伴可以关注他博客。 

有关动态加载，load之前知识点已经讲过了。

这里看效果与加载。

 点击按钮后，与静态差不多。

 代码：

 LoginPage

import QtQuick 2.0
import QtQuick.Controls 2.3
Rectangle {
    width: 400
    height: 300
    color: "#051f58"
    radius: 8

    Button {
        text: "登录页面-登录按钮"
        anchors.centerIn: parent
        onClicked: myLoader.sourceComponent = mainPage // 切换显示主页面
    }
}
           

  MainPage

import QtQuick 2.0
import QtQuick.Controls 2.3
Rectangle {
    color: "#498ff8"
    radius: 8

    Button {
        text: "主页面-返回按钮"
        anchors.centerIn: parent
        onClicked: myLoader.sourceComponent = loginPage // 切换显示登录页面
    }
}
           

mian.qml

import QtQuick 2.12
import QtQuick.Window 2.12

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

    // 1. Loader加载不同组件，实现切换页面的功能
       Loader{
           id:myLoader
           anchors.centerIn: parent // 弹出的界面都居中显示
       }
       Component.onCompleted: myLoader.sourceComponent = loginPage // 一开始显示登录页面

       // 2. 登录页面-Component
       Component{
           id:loginPage
           LoginPage {
               width: 300
               height: 200
               anchors.centerIn: parent
           }
       }

       // 3.主页面-Component
       Component{
           id:mainPage
           MainPage {
               width: 500
               height: 350
               anchors.centerIn: parent
           }
       }
}
           

 利用createComponent 创建并切换

这里就不在展示效果了，直接上代码：

main.qml
------------------------------------
import QtQuick 2.9
import QtQuick.Window 2.2

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

    LoginPage {
        width: 300
        height: 200
        anchors.centerIn: parent
    }
}

LoginPage.qml
------------------------------------
import QtQuick 2.0
import QtQuick.Controls 2.3

Rectangle {
    id: loginPage
    width: 400
    height: 300
    color: "#051f58"
    radius: 8
    clip:true

    Button {
        text: "登录页面-登录按钮"
        anchors.centerIn: parent
        onClicked: {
            // 隐藏登录页面
            loginPage.visible = false // 不能销毁，否则下面的"主页面"也会跟随销毁，则后面
            // 点击"主页面-关闭按钮"，将无法销毁关闭"主页面"

            // 在主窗口（mainWin）上显示主页面
            var compMainPage = Qt.createComponent("MainPage.qml")
            .createObject(mainWin, {x:50, y:50, width:200, height:250});
        }
    }
}

MainPage.qml
------------------------------------
import QtQuick 2.0
import QtQuick.Controls 2.3

Rectangle {
    id: mainPage
    color: "#498ff8"
    radius: 8

    Button {
        text: "主页面-关闭按钮"
        anchors.centerIn: parent
        onClicked: {
            // 销毁关闭主页面
            mainPage.destroy()
        }
    }
}