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

先看下效果：

靜態

一、隱藏法

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

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

二、利用 StackView、SwipeView

參考：Qt Quick之StackView詳解（1）

動態

一、使用Loader動態載入QML元件

Loader 元素用來動態載入可見的 QML 元件，它可以載入一個 QML 檔案（使用 source 屬性）或者一個元件物件（使用 sourceComponent 屬性）。具體可以參考：QML 使用Loader動態載入元件

程式碼如下：

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 // 切換顯示登入頁面
    }
}
 

二、利用 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

            // 在主視窗上顯示主頁面
            var compMain = Qt.createComponent("MainPage.qml")
            .createObject(mainWin, {x:50, y:50, width:500, height:350});
        }
    }
}

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.visible = false

            // 在主視窗上顯示登入頁面
            var compLogin = Qt.createComponent("LoginPage.qml")
            .createObject(mainWin, {x:100, y:100, width:500, height:350});
        }
    }
}
 

本來應該使用compLogin.destroy()來銷燬登入頁面以達到關閉的效果，同時節省記憶體，奈何學藝不精試了下沒有實現好，故先暫時使用"隱藏"的方法。

使用場景分析

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

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

參考：

QML 頁面切換方式

QtQuick多頁面切換、多頁面切換動畫、多個qml檔案資料互動

QT QML呼叫新頁面和退出新頁面回到原來頁面