Qt/QML学习-StackView

QML学习

• StackView例程
• 视频讲解
• 代码

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15Window {width: 640height: 480visible: truetitle: qsTr("StackView")StackView {id: stackViewanchors.fill: parent// 背景视图background: Rectangle{color: "green"}// 启动视图initialItem: MyView01 {stackView: stackView}// 过渡动画pushEnter: Transition {from: "*"to: "*"PropertyAnimation {property: "width"from: 0to: stackView.widthduration: 500}PropertyAnimation {property: "height"from: 0to: stackView.heightduration: 500}}}
}

MyView01.qml

import QtQuick 2.15
import QtQuick.Controls 2.15Item {property StackView stackViewRectangle {anchors.fill: parentcolor: "red"Text {anchors.centerIn: parenttext: "视图1"font.pointSize: 30}Button {anchors.right: parent.rightfont.pointSize: 20text: "进入视图2"onClicked: {stackView.push("qrc:/MyView02.qml",{stackView: stackView})}}}
}

MyView02.qml

import QtQuick 2.15
import QtQuick.Controls 2.15Item {property StackView stackViewRectangle {anchors.fill: parentcolor: "yellow"Text {anchors.centerIn: parenttext: "视图2"font.pointSize: 30}Button {font.pointSize: 20text: "回退视图1"onClicked: {stackView.pop()}}Button {anchors.right: parent.rightfont.pointSize: 20text: "进入视图3"onClicked: {stackView.push("qrc:/MyView03.qml",{stackView: stackView})}}}
}

MyView03.qml

import QtQuick 2.15
import QtQuick.Controls 2.15Item {property StackView stackViewRectangle {anchors.fill: parentcolor: "blue"Text {anchors.centerIn: parenttext: "视图3"font.pointSize: 30}Button {font.pointSize: 20text: "回退视图2"onClicked: {stackView.pop()}}Button {anchors.right: parent.rightfont.pointSize: 20text: "回退首页"onClicked: {stackView.pop(null)}}}
}

演示

视频讲解