QML 开发客户端应用，避不可免要进行界面切换，例如从登录界面跳转到主界面。网上看了下多篇博客，都比较简陋不是很详细，不太好进行参考，所以决定自己参考这些博客，总结一下几种界面切换的方法。
先看下效果：
静态
一、隐藏法
本质上各页面都存在，只是某些隐藏，某些显示，当某一触发条件满足时，设置对应页面的显示和隐藏。
main.qml
------------------------------------
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
640
height: 480
title: qsTr("Hello World")
// 主页面一开始设置"隐藏"，登录成功后才显示
MainPage {
id: mainPage
500
height: 350
visible: false // 设置"隐藏"
anchors.centerIn: parent
}
LoginPage {
id: loginPage
300
height: 200
anchors.centerIn: parent
}
}
LoginPage.qml
------------------------------------
import QtQuick 2.0
import QtQuick.Controls 2.3
Rectangle {
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
动态
一、使用Loader动态加载QML组件
Loader 元素用来动态加载可见的 QML 组件，它可以加载一个 QML 文件（使用 source 属性）或者一个组件对象（使用 sourceComponent 属性）。
代码如下：
main.qml
------------------------------------
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
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 {
300
height: 200
anchors.centerIn: parent
}
}
// 3.主页面-Component
Component{
id:mainPage
MainPage {
500
height: 350
anchors.centerIn: parent
}
}
}
LoginPage.qml
------------------------------------
import QtQuick 2.0
import QtQuick.Controls 2.3
Rectangle {
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
640
height: 480
title: qsTr("Hello World")
LoginPage {
300
height: 200
anchors.centerIn: parent
}
}
LoginPage.qml
------------------------------------
import QtQuick 2.0
import QtQuick.Controls 2.3
Rectangle {
id: loginPage
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, 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()来销毁登录页面以达到关闭的效果，同时节省内存。
使用场景分析
如果想记录上一页的操作，可以使用静态的方式，比如设置用户名的页面，切换到下一页，但也可能返回到上一页。
如果想每次进入页面时，一切从新开始，不想记录任何信息，则使用动态方式。比如登录类切换，登录后一切都应该从新开始。
参考：
QtQuick多页面切换、多页面切换动画、多个qml文件数据交互