静态
一、隐藏法
本质上各页面都存在，只是某些隐藏，某些显示，当某一触发条件满足时，设置对应页面的显示和隐藏。
-
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 属性）。具体可以参考：QML 使用Loader动态加载组件
代码如下：
-
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
-
-
// 在主窗口上显示主页面
-
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.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});
-
}
-
}
-
}
本来应该使用compLogin.destroy()来销毁登录页面以达到关闭的效果，同时节省内存，奈何学艺不精试了下没有实现好，故先暂时使用"隐藏"的方法。
使用场景分析
如果想记录上一页的操作，可以使用静态的方式，比如设置用户名的页面，切换到下一页，但也可能返回到上一页。
如果想每次进入页面时，一切从新开始，不想记录任何信息，则使用动态方式。比如登录类切换，登录后一切都应该从新开始。
</article>
797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
