QML 界面切换的几种方法

静态

一、隐藏法

本质上各页面都存在，只是某些隐藏，某些显示，当某一触发条件满足时，设置对应页面的显示和隐藏。

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 界面切换的几种方法相关推荐

android activity切换动画关闭,Activity取消界面切换的默认动画方法(推荐)
一般启动一个新的activity都默认有切换的动画效果,比如界面从右至左的移动. 但是有些时候我们不需要这个动画,怎么办? 操作方法比较麻烦,这里我推荐其中一种.我这里是要做启动页splash到首页h ...
DLL中资源切换的两种方法
DLL中资源切换的两种方法方法1 AFX_MANAGE_STATE(AfxGetAppModuleState()); // MFC扩展dll 或 AFX_MANAGE_ ...
CSS实现导航条Tab切换的三种方法
前面的话导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法布局根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布局效 ...
python箭头向下怎么变_实现点击下箭头变上箭头来回切换的两种方法【推荐】
我所知道的常用的就这两种. 第一种:说明一下我用的是fontawesome字体,首先要去官网下载来用我用的是bootstrap,所以hidden是自带的,上面的初始状态就是下箭头angle-down ...
【PyQt】pyqt加载调用ui界面文件的两种方法
使用PyQt开发界面软件,自然会用到Qt Designer进行界面设计,拖拖按钮.设置菜单什么的,然后保存为 .ui 文件.但是在 Python 代码里面如何使用这些 .ui 文件呢? 有两种方法: ...
Javascript获取Html界面元素的几种方法
在Javascript,可以通过多种方式获取Html元素对象.以下是一个Html页面示例. <body> <form name="form1" method=&q ...
【网页前端实现多张图片轮播或者切换】三种方法实现
多张图片轮播今天我们主要用三种方式实现多张图片轮播,运用的语言是web中的html,使用软件是HBuilder. 达到以下这种效果:![可以通过下方原点点击或者左右两侧点击进行图片的切换](http ...
Qml界面切换时，字体消失或乱码
文章目录前言效果图原因分析解决方案前言最近开发qml 桌面应用时,在同事的 win8系统系统上,字体会离奇消失或者乱码,在win7, win10上面就不会有这个问题,我自己下的win8也 ...
Maya中英切换的两种方法
一种是系统变量法: 打开文件资源管理器控制面板\系统和安全\系统,点击高级系统设置,点击高级,再点击环境变量新建环境变量,变量名输入[MAYA_UI_LANGUAGE], 变量值输入[zh_CN] ...