QML 界面切换的几种方法(带示例代码)
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
动态
一、使用Loader动态加载QML组件
Loader 元素用来动态加载可见的 QML 组件,它可以加载一个 QML 文件(使用 source 属性)或者一个组件对象(使用 sourceComponent 属性)。
代码如下:
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 // 不能销毁,否则下面的"主页面"也会跟随销毁,则后面
// 点击"主页面-关闭按钮",将无法销毁关闭"主页面"
// 在主窗口(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()
来销毁登录页面以达到关闭的效果,同时节省内存。
使用场景分析
如果想记录上一页的操作,可以使用静态的方式,比如设置用户名的页面,切换到下一页,但也可能返回到上一页。
如果想每次进入页面时,一切从新开始,不想记录任何信息,则使用动态方式。比如登录类切换,登录后一切都应该从新开始。
参考:
QtQuick多页面切换、多页面切换动画、多个qml文件数据交互
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效