当前位置：首页 > news >正文

QML学习笔记（四十）QML的ApplicationWindow和StackView

news 2025/10/18 11:53:16

前言

ApplicationWindow是一个已经具备基础ui的窗口，和Window同样都是顶层窗口，如果希望实现标题栏、菜单栏这种快速开发的导航功能的话可以选择它。
StackView是一种可以将任意QML页面进行堆栈压入的多层显示窗口，适用于需要进行翻页等操作的场景。

一、ApplicationWindow

ApplicationWindow 是 QtQuick.Controls 2 给你的“成品主窗口”——自带标题栏、菜单栏、工具栏、状态栏、键盘焦点链、平台窗口生命周期信号，不需要再包一层 Window，直接当根节点用。
在这里插入图片描述

ApplicationWindow是一个窗口，可以方便地在窗口中添加菜单栏、页眉和页脚项。
您可以将ApplicationWindow声明为应用程序的根项，并使用QQmlApplicationEngine运行它。通过这种方式，您可以从QML控制窗口的属性、外观和布局。

二、StackView

StackView = QML 的“页面导航栈”

一条指令 push(item) 把任意 QML 页面压栈，自动动画切换
pop() 出栈回退，深度任意
自带生命周期：页面可动态创建/销毁，也可缓存
有信号 currentItemChanged / depthChanged 监听导航
支持滑动、淡入淡出等过渡动画，也能自定义

一句话：
“QML 世界的 QStackedWidget + 历史栈 + 动画 三合一。”

它和QWidget中的QStackedWidegt属于同一个概念的产物都是用于进行翻页操作的。这里给出它们的总结对比：

维度	QML StackView	QWidget QStackedWidget
底层类型	`QQuickItem`（场景图节点）	`QWidget`（经典窗体）
使用语言	QML + JS	C++ / QtWidgets
页面内容	任意 QML 组件（矩形、列表、复杂 UI）	任意 QWidget（按钮、表格、自定义窗体）
切换方式	命令式 `push(item)` / `pop()` / `replace()` 支持动画、传参、回退栈	索引式 `setCurrentIndex(int)` 或 `setCurrentWidget(QWidget*)` 无内建动画、无栈概念
动画	内置滑动、淡入淡出等，可自定义	无（需自己写 `QPropertyAnimation`）
生命周期	自动创建/销毁（可缓存）	所有页面一次性构造，只隐藏不销毁（除非手动删除）
导航栈	真正的“后进先出”栈，可多级回退	仅当前索引，没有历史栈
信号	`currentItemChanged` / `depthChanged` / `pushCompleted` 等	`currentChanged(int)`
性能	动态实例化，内存占用小	一次性构造，切换快但初始慢
平台限制	Qt Quick 场景	经典 Widget 场景

三、测试例子

代码：

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Window 2.14
import QtQuick.Layouts 1.12ApplicationWindow {id: mainWindowvisible: truewidth: 480height: 320title: qsTr("QmlApplicationWindow")color: "#f5f5f5"                     // 客户区背景/* 1. 菜单栏 */menuBar: MenuBar {Menu {title: qsTr("文件")MenuItem { text: qsTr("打开"); onTriggered: console.log("打开") }MenuItem { text: qsTr("退出"); onTriggered: Qt.quit() }}Menu {title: qsTr("帮助")MenuItem { text: qsTr("关于"); onTriggered: console.log("关于") }}MenuSeparator{height: 2}Menu {title: qsTr("New")Action{id: newActionIdtext: "New"
//                icon.source: ""onTriggered: console.log("New")}Action{id: saveActionIdtext: "Save"
//                icon.source: ""onTriggered: console.log("Save")}}}/* 2. 工具栏 */header/*toolBar*/: ToolBar {RowLayout {anchors.fill: parentToolButton { action: newActionId }ToolButton { action: saveActionId }Item { Layout.fillWidth: true }   // 弹簧Label { text: "简易工具栏" }}}/* 3. 客户区内容 */StackView{id: stackIdanchors.fill: parentinitialItem: Rectangle{ color: "grey" }}footer: TabBar{id: tabBarIdwidth: parent.widthTabButton{text: "Red"onClicked: function(){stackId.pop()stackId.push(redRect)console.log("Numbers of stack items: " + stackId.depth)}}TabButton{text: "Green"onClicked: function(){stackId.pop()stackId.push(greenRect)console.log("Numbers of stack items: " + stackId.depth)}}TabButton{text: "Blue"onClicked: function(){stackId.pop()stackId.push(Qt.createQmlObject('import QtQuick 2.14; Rectangle {color: "blue"}', stackId))console.log("Numbers of stack items: " + stackId.depth)}}TabButton{text: "Orange"onClicked: function(){stackId.pop()stackId.push("Orange.qml")console.log("Numbers of stack items: " + stackId.depth)}}TabButton{text: "Pop"onClicked: function(){stackId.pop()console.log("Numbers of stack items: " + stackId.depth)}}}/* 4. 关闭前确认 */onClosing: function(closeEvent) {closeEvent.accepted = false;          // 先阻止console.log("用户点 × 了，可弹窗确认");// 这里写弹窗逻辑，若确认再 Qt.quit()}/* ① 内联 Component */Component {id: redRectRectangle { color: "red" }}Component {id: greenRectRectangle { color: "green" }}
}

运行效果：
在这里插入图片描述

1.最上面的是菜单栏menuBar，header页眉里的ToolButton { action: newActionId }写法本质上是链接到了menuBar里面的一个action行为。
2.footer页脚里放置了多个TabButton，是为了切换StackView里的页面，采用的是在信号处理器里动态堆栈压入的方式。
3.StackView{initialItem: Rectangle{ color: “grey” }}这给了一个初始项，正常pop是会保留最后一个项的，不会把它出栈掉的。所以打印出来的当前栈深度一直都是2。