QML中使用StackView实例
参考:https://blog.csdn.net/cqltbe131421/article/details/83148918这个是简单的应用。原作者在github上放上了源码,能在实际中用,方便进行子界面切换:地址:https://github.com/cedoduarte/QML_StackView_example上代码:main.qml文件:import QtQuick 2.9i...
文章共1,927字 · 阅读需要大约7分钟
一键AI生成摘要,助你高效阅读
问答
·
参考:https://blog.csdn.net/cqltbe131421/article/details/83148918
这个是简单的应用。
原作者在github上放上了源码,能在实际中用,方便进行子界面切换:
地址:https://github.com/cedoduarte/QML_StackView_example
上代码:
main.qml文件:
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
header: ToolBar {
RowLayout {
anchors.fill: parent
ToolButton {
text: qsTr("‹")
onClicked: mystackview.pop()
}
Label {
text: qsTr("Stackview Example App")
elide: Label.ElideRight
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
Layout.fillWidth: true
}
}
}
StackView {
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
top: header.bottom
}
id: mystackview
initialItem: starting_page
}
Component {
id: starting_page
StartingPage {}
}
Component {
id: second_page
SecondPage {}
}
Component {
id: third_page
ThirdPage {}
}
Component {
id: fourth_page
FourthPage {}
}
function load_page(page) {
switch (page) {
case 'Page 1':
mystackview.push(starting_page);
break;
case 'Page 2':
mystackview.push(second_page);
break;
case 'Page 3':
mystackview.push(third_page);
break;
case 'Page 4':
mystackview.push(fourth_page);
break;
}
}
}
第一个界面StartingPage.qml
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Item {
RowLayout {
anchors.centerIn: parent
width: parent.width
Button {
text: 'Page 1'
Layout.fillWidth: true
onClicked: {
load_page(text);
}
}
Button {
text: 'Page 2'
Layout.fillWidth: true
onClicked: {
load_page(text);
}
}
Button {
text: 'Page 3'
Layout.fillWidth: true
onClicked: {
load_page(text);
}
}
Button {
text: 'Page 4'
Layout.fillWidth: true
onClicked: {
load_page(text);
}
}
}
}
第二个界面SecondPage.qml
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Item {
ListView {
width: parent.width
height: parent.height
anchors.centerIn: parent
spacing: 10
model: ListModel {
ListElement {
name: 'Pedro'
age: 30
}
ListElement {
name: 'Juan'
age: 23
}
ListElement {
name: 'Ana'
age: 19
}
ListElement {
name: 'Luisa'
age: 25
}
}
delegate: Rectangle {
width: parent.width
height: 20
color: 'red'
Text {
anchors.centerIn: parent
color: 'white'
text: 'Name: ' + name + ', Age: ' + age
font.pointSize: 20
}
}
}
}
第三个界面ThirdPage.qml:
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Item {
ColumnLayout {
anchors.centerIn: parent
Repeater {
model: ListModel {
ListElement {
page: 'Page 1'
}
ListElement {
page: 'Page 2'
}
ListElement {
page: 'Page 3'
}
ListElement {
page: 'Page 4'
}
ListElement {
page: 'Page 5'
}
}
Button {
text: page
onClicked: {
load_page(text);
}
}
}
}
}
第四个界面FourthPage.qml:
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Item {
Rectangle {
anchors.fill: parent
color: 'green'
Button {
anchors.centerIn: parent
text: 'Exit'
onClicked: {
Qt.quit();
}
}
}
}
分析代码:
在main.qml中只有StackView,这个组件填充了主界面,通过Componet加载各个子界面:
Component {
id: starting_page
StartingPage {}
}
Component {
id: second_page
SecondPage {}
}
Component {
id: third_page
ThirdPage {}
}
Component {
id: fourth_page
FourthPage {}
}
切换界面函数用的是js函数:
function load_page(page) {
switch (page) {
case 'Page 1':
mystackview.push(starting_page);
break;
case 'Page 2':
mystackview.push(second_page);
break;
case 'Page 3':
mystackview.push(third_page);
break;
case 'Page 4':
mystackview.push(fourth_page);
break;
}
}
在子界面中,也是调用load_page函数进行切换界面。
运行界面:
其余界面就不在这里一一列出了,参考原作者的github源码,还有另外一个博客地址,基本弄清楚怎么使用StackView。
更多推荐
已为社区贡献9条内容
所有评论(0)