靜態

一、隱藏法

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

main.qml ------------------------------------ import QtQuick 2.9 import QtQuick.Window 2.2Window {visible: truewidth: 640height: 480title: qsTr("Hello World")// 主頁面一開始設置"隱藏"，登錄成功后才顯示MainPage {id: mainPagewidth: 500height: 350visible: false // 設置"隱藏"anchors.centerIn: parent}LoginPage {id: loginPagewidth: 300height: 200anchors.centerIn: parent} }LoginPage.qml ------------------------------------ import QtQuick 2.0 import QtQuick.Controls 2.3Rectangle {width: 400height: 300color: "#051f58"radius: 8Button {text: "登錄頁面-登錄按鈕"anchors.centerIn: parentonClicked: {loginPage.visible = falsemainPage.visible = true}} }MainPage.qml ------------------------------------ import QtQuick 2.0 import QtQuick.Controls 2.3Rectangle {color: "#498ff8"radius: 8Button {text: "主頁面-返回按鈕"anchors.centerIn: parentonClicked: {loginPage.visible = truemainPage.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.2Window {visible: truewidth: 640height: 480title: qsTr("Hello World")// 1. Loader加載不同組件，實現切換頁面的功能Loader{id:myLoaderanchors.centerIn: parent // 彈出的界面都居中顯示}Component.onCompleted: myLoader.sourceComponent = loginPage // 一開始顯示登錄頁面// 2. 登錄頁面-ComponentComponent{id:loginPageLoginPage {width: 300height: 200anchors.centerIn: parent}}// 3.主頁面-ComponentComponent{id:mainPageMainPage {width: 500height: 350anchors.centerIn: parent}} }LoginPage.qml ------------------------------------ import QtQuick 2.0 import QtQuick.Controls 2.3Rectangle {width: 400height: 300color: "#051f58"radius: 8Button {text: "登錄頁面-登錄按鈕"anchors.centerIn: parentonClicked: myLoader.sourceComponent = mainPage // 切換顯示主頁面} }MainPage.qml ------------------------------------ import QtQuick 2.0 import QtQuick.Controls 2.3Rectangle {color: "#498ff8"radius: 8Button {text: "主頁面-返回按鈕"anchors.centerIn: parentonClicked: myLoader.sourceComponent = loginPage // 切換顯示登錄頁面} }

二、利用 createComponent 創建并切換

main.qml ------------------------------------ import QtQuick 2.9 import QtQuick.Window 2.2Window {id: mainWinvisible: truewidth: 640height: 480title: qsTr("Hello World")LoginPage {width: 300height: 200anchors.centerIn: parent} }LoginPage.qml ------------------------------------ import QtQuick 2.0 import QtQuick.Controls 2.3Rectangle {id: loginPagewidth: 400height: 300color: "#051f58"radius: 8clip:trueButton {text: "登錄頁面-登錄按鈕"anchors.centerIn: parentonClicked: {// 先隱藏登錄頁面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.3Rectangle {id: mainPagecolor: "#498ff8"radius: 8Button {text: "主頁面-返回按鈕"anchors.centerIn: parentonClicked: {// 先隱藏主頁面mainPage.visible = false// 在主窗口上顯示登錄頁面var compLogin = Qt.createComponent("LoginPage.qml").createObject(mainWin, {x:100, y:100, width:500, height:350});}} }

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

使用場景分析

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

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

總結

以上是生活随笔為你收集整理的QML 界面切换的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。