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()
        }
    }
}