QT quick基础：qml界面切换
需求说明，在项目开发过程中，可能会出现多个界面切换问题。再测试过程中发现，程序开始运行时，所有界面的功能逻辑都在运行，这可能导致程序开始运行时浪费性能。因此，学习找到一种方式，当前显示的界面相关功能运行，否则停止运行。因此，写这篇文章记录一下。
参考学习文档：https://blog.csdn.net/u011555996/article/details/122004214
实例中，写了两个界面，登录界面和主界面。程序运行默认显示登录界面，点击“登录页面-登录按钮”按钮，界面切换到主界面。点击“主页面-返回按钮”按钮，返回登录界面。两个界面都添加了一个定时器，方便通过日志观察每个界面运行的时机。
一、静态加载
1、隐藏法
// main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
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
}
}
Timer {
interval: 100; running: true; repeat: true;
onTriggered: console.log("loginPage lili 123456");
}
}
// 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
}
}
Timer {
interval: 100; running: true; repeat: true;
onTriggered: console.log("mainPage lili 123456");
}
}
运行效果：
登录界面：
主界面：
通过运行效果可以看出，在登录界面和主界面，两个界面的功能逻辑都在运行。既程序运行后，两个界面同时加载，只是通过，界面显示和隐藏逻辑，确定哪个界面输出。
2、SwipeView
参考文章：https://blog.csdn.net/weixin_44697562/article/details/116334077
代码：
// main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
id: mainWin
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Item {
anchors.fill: parent
Rectangle{
id:rect_BG
anchors.fill: parent
radius: 5
color: "#018574"
}
SwipeView{
id:swipeView
anchors.left: parent.left
anchors.leftMargin: 10
anchors.right: parent.right
anchors.rightMargin: 10
anchors.top: parent.top
anchors.topMargin: 50
anchors.bottom: parent.bottom
anchors.bottomMargin: 30
spacing: 10
ServerPanel{id:sp_ROOT}
ListPanel{id:lp_ROOT}
}
PageIndicator{
id:indicator
anchors.bottom: parent.bottom
anchors.bottomMargin: 10
anchors.horizontalCenter: parent.horizontalCenter
currentIndex: swipeView.currentIndex
count:swipeView.count
}
}
}
// ListPanel.qml
import QtQuick 2.0
import QtQuick.Controls 2.5
Page {
id:lp_ROOT
background: null
Label{
anchors.horizontalCenter: parent.hoverEnabled
Text {
text: "列表界面"
color: "white"
font.bold: true
font.pointSize: 14
}
}
Timer {
interval: 10; running: true; repeat: true;
onTriggered: console.log("listPanel 123456");
}
}
// ServerPanel.qml
import QtQuick 2.0
import QtQuick.Controls 2.5
Page {
background: null
Label{
anchors.horizontalCenter: parent.hoverEnabled
Text {
text: "服务器界面"
color: "white"
font.bold: true
font.pointSize: 14
}
}
Timer {
interval: 10; running: true; repeat: true;
onTriggered: console.log("ServerPanel 123456");
}
}
效果图：
该组件类似android的ViewPaper + fragment效果。程序开始运行，要显示的page全部加载进来。SwipeView是通过更改currentIndex来实现切换页面的，所以只需要将你的SwipeView内的id声明出来然后修改currentIndex即可。
Button{
id:btn_Front
text: "上一个"
anchors.centerIn: parent
onClicked: {
bg_ROOT.swipeView.currentIndex -= 1
}
}
二、动态切换
1、使用Loader动态加载QML组件
代码：
// main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
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 // 切换显示主页面
}
}
Timer {
interval: 100; running: true; repeat: true;
onTriggered: console.log("loginPage lili 123456");
}
}
// 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 // 切换显示登录页面
}
}
Timer {
interval: 100; running: true; repeat: true;
onTriggered: console.log("mainPage lili 123456");
}
}
运行效果：
登录界面
主界面
返回登录界面：
通过日志可以看出，哪个界面在前台，就运行哪个界面。
2、利用 createComponent 创建并切换
代码：
// main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
id: mainWin
visible: true
width: 640
height: 480
title: qsTr("Hello World")
// 2. 利用 createComponent 创建并切换
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});
}
}
Timer {
interval: 10; running: true; repeat: true;
onTriggered: console.log("loginPage 123456");
}
}
// 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});
}
}
Timer {
interval: 10; running: true; repeat: true;
onTriggered: console.log("mainPage 123456");
}
}
运行效果：
登录界面
主界面
返回登录界面
通过日志可以看出，程序运行时，只有前台界面运行。打开主界面后及返回登录界面，两个界面都在运行。