QML界面切換的幾種方法

QML 開發用戶端應用，避不可免要進行界面切換，例如從登入界面跳轉到主界面。網上看了下多篇部落格，都比較簡陋不是很詳細，不太好進行參考，是以決定自己參考這些部落格，總結一下幾種界面切換的方法。

先看下效果：

1、靜态

1.1、隐藏法

本質上各頁面都存在，隻是某些隐藏，某些顯示，當某一觸發條件滿足時，設定對應頁面的顯示和隐藏。

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

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

    // 首頁面一開始設定"隐藏"，登入成功後才顯示
    MainPage {
        id: mainPage
        width: 500
        height: 350
        visible: false // 設定"隐藏"
        anchors.centerIn: parent
    }

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

LoginPage.qml
------------------------------------
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.qml
------------------------------------
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
        }
    }
}
QT開發交流+赀料君羊：714620761           

1.2、、利用 StackView、SwipeView

2、動态

2.1、使用Loader動态加載QML元件

Loader 元素用來動态加載可見的 QML 元件，它可以加載一個 QML 檔案（使用 source 屬性）或者一個元件對象（使用 sourceComponent 屬性）。

代碼如下：

QT開發交流+赀料君羊：714620761

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

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

LoginPage.qml
------------------------------------
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.qml
------------------------------------
import QtQuick 2.0
import QtQuick.Controls 2.3

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

    Button {
        text: "首頁面-傳回按鈕"
        anchors.centerIn: parent
        onClicked: myLoader.sourceComponent = loginPage // 切換顯示登入頁面
    }
}
           

2.2、利用 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()
        }
    }
}
           

使用compLogin.destroy()來銷毀登入頁面以達到關閉的效果，同時節省記憶體。

3、使用場景分析

如果想記錄上一頁的操作，可以使用靜态的方式，比如設定使用者名的頁面，切換到下一頁，但也可能傳回到上一頁。

如果想每次進入頁面時，一切從新開始，不想記錄任何資訊，則使用動态方式。比如登入類切換，登入後一切都應該從新開始。