Drawer

Drawer 提供一个可以使用滑动手势打开和关闭的侧面板。继承自 Popup。

Drawer 可以从上下左右四个方向打开。

import QtQuickimport QtQuick.ControlsApplicationWindow {id: windowvisible: trueDrawer {id: drawerwidth: 0.66 * window.widthheight: window.heightLabel {text: "Content goes here!"anchors.centerIn: parent}}}

将 Drawer 定位为显示在窗口标题下方：

import QtQuickimport QtQuick.Controlsimport QtQuick.Layouts 1.12ApplicationWindow {id: windowvisible: trueheader: ToolBar{RowLayout {anchors.fill: parentToolButton {text: "测试1"}ToolButton {text: "测试2"}}}Drawer {y: header.heightwidth: window.width * 0.6height: window.height - header.heightLabel {text: "Content goes here!"anchors.centerIn: parent}}}

position 属性确定 Drawer 的可见程度，值介于 0.0 和 1.0 之间。以下代码使用一个和 Drawer 同级的 Label 来演示“Label 被 Drawer 推动”的效果：

import QtQuickimport QtQuick.ControlsApplicationWindow {id: windowwidth: 200height: 228visible: trueDrawer {id: drawerwidth: 0.66 * window.widthheight: window.height}Label {id: contenttext: "Aa"font.pixelSize: 96anchors.fill: parentverticalAlignment: Label.AlignVCenterhorizontalAlignment: Label.AlignHCentertransform: Translate { //x属性变化规律x: drawer.position * content.width * 0.33}}}

import QtQuickimport QtQuick.ControlsApplicationWindow {id: windowvisible: trueDrawer {id: drawerwidth: 0.66 * window.widthheight: window.heightbackground: Rectangle {color: "#128bf1"Rectangle {x: parent.width - 3width: 3height: parent.heightcolor: "#ff0000"}}Label {text: "Content goes here!"anchors.centerIn: parent}}}

【领QT开发教程学习资料，点击下方链接莬费领取↓↓，先码住不迷路~】

点击这里：「链接」

属性成员

1、dragMargin : real

与屏幕边缘的距离，在该距离内拖动操作将打开 Drawer。设置为 小于等于 0 可禁用通过拖动打开Drawer。

默认值为 Qt.styleHints.startDragDistance。

2、edge : enumeration

打开 Drawer 的窗口边缘。

Qt.TopEdge：上边缘。Qt.LeftEdge：左边缘（默认）。Qt.RightEdge：右边缘。Qt.BottomEdge：底部边缘。

3、interactive : bool

Drawer 是否是交互式的。 非交互式不会对滑动做出反应。默认为 true。

4、position : real

Drawer 相对于其最终目的地的位置。完全关闭时位置为 0.0，完全打开时位置为 1.0。

StackView

StackView 提供栈式导航。它的特点是用类似于栈的方式管理一系列界面，这些界面之间可能有内在联系，根据业务需要，可以一级一级向前面跳转或返回后面的界面。

import QtQuickimport QtQuick.ControlsApplicationWindow {title: qsTr("Hello World")width: 640height: 480visible: trueStackView{id: stackinitialItem: mainViewanchors.fill: parent}Component {id: mainViewRow {spacing: 10Button {text: "一个界面进栈"onClicked: stack.push(mainView)}Button {text: "一个界面出栈"enabled: stack.depth > 1onClicked: stack.pop()}Text {text: "当前界面的栈深度：" + stack.depth}}}}

StackView 不会从 push() 到它的项目中继承隐式大小。下面的 Dialog 的 contentItem 将无法按预期工作：

Dialog {StackView {initialItem: Rectangle {width: 200height: 200color: "salmon"}}}

1、【只读】busy : bool

转换是否正在运行。

2、【只读】currentItem : Item

堆栈中当前最顶层的项目。

3、【只读】depth : int

当前堆栈中的项目数。

4、【只读】empty : bool

堆栈是否为空。

5、initialItem : var

创建 StackView 时应显示的初始项。可以是 Item、Component 或 url。

指定初始项等效于：

Component.onCompleted: stackView.push(myInitialItem)

6、popEnter : Transition

当一个项目从堆栈中弹出时应用于进入堆栈顶部的项目的转换。

import QtQuickimport QtQuick.ControlsApplicationWindow {title: qsTr("Hello World")width: 640height: 480visible: trueStackView{id: stackinitialItem: mainViewanchors.fill: parentpopEnter : Transition {PropertyAnimation {property: "opacity"from: 0to:1duration: 200}PropertyAnimation {property: "y"from: 100to:0duration: 200}}}Component {id: mainViewRow {spacing: 10Button {text: "一个界面进栈"onClicked: stack.push(mainView)}Button {text: "一个界面出栈"enabled: stack.depth > 1onClicked: stack.pop()}Text {text: "当前界面的栈深度：" + stack.depthComponent.onDestruction: print("销毁item")}}}}

7、popExit : Transition

当项目从堆栈中弹出时应用于退出堆栈的项目的转换。

import QtQuickimport QtQuick.ControlsApplicationWindow {title: qsTr("Hello World")width: 640height: 480visible: trueStackView{id: stackinitialItem: mainViewanchors.fill: parentpopExit : Transition {PropertyAnimation {property: "opacity"from: 0to:1duration: 200}PropertyAnimation {property: "y"from: 0to:100duration: 200}}}Component {id: mainViewRow {spacing: 10Button {text: "一个界面进栈"onClicked: stack.push(mainView)}Button {text: "一个界面出栈"enabled: stack.depth > 1onClicked: stack.pop()}Text {text: "当前界面的栈深度：" + stack.depthComponent.onDestruction: print("销毁item")}}}}

8、pushEnter : Transition

在项目被推入堆栈时应用于进入堆栈的项目的转换。

import QtQuickimport QtQuick.ControlsApplicationWindow {title: qsTr("Hello World")width: 640height: 480visible: trueStackView{id: stackinitialItem: mainViewanchors.fill: parentpushEnter : Transition {PropertyAnimation {property: "opacity"from: 0to:1duration: 200}PropertyAnimation {property: "y"from: 100to:0duration: 200}}}Component {id: mainViewRow {spacing: 10Button {text: "一个界面进栈"onClicked: stack.push(mainView)}Button {text: "一个界面出栈"enabled: stack.depth > 1onClicked: stack.pop()}Text {text: "当前界面的栈深度：" + stack.depthComponent.onDestruction: print("销毁item")}}}}

9、pushExit : Transition

项目被推入堆栈时应用于退出堆栈顶部的项目的转换。

import QtQuickimport QtQuick.ControlsApplicationWindow {title: qsTr("Hello World")width: 640height: 480visible: trueStackView{id: stackinitialItem: mainViewanchors.fill: parentpushExit : Transition {PropertyAnimation {property: "opacity"from: 1to:0duration: 200}PropertyAnimation {property: "y"from: 0to:100duration: 200}}}Component {id: mainViewRow {spacing: 10Button {text: "一个界面进栈"onClicked: stack.push(mainView)}Button {text: "一个界面出栈"enabled: stack.depth > 1onClicked: stack.pop()}Text {text: "当前界面的栈深度：" + stack.depthComponent.onDestruction: print("销毁item")}}}}

10、replaceEnter ：Transition

当项目A被另一个项目B替换时应用于项目B的转换。

11、replaceExit : Transition

当项目A被另一个项目B替换时应用于项目A的转换。

附加属性成员

1、【只读】StackView.index : int

所附加到的项目的堆栈索引，如果项目不在堆栈中，则为 -1。

2、【只读】StackView.status : enumeration

附加的项目的堆栈状态，如果项目不在堆栈中，则为 StackView.Inactive。

StackView.Inactive：非活动状态（或不在堆栈中）。StackView.Deactivating：正在被停用（弹出）。StackView.Activating：正在被激活（成为当前项目）。StackView.Active：处于活动状态，即当前项。

3、【只读】StackView.view : StackView

所附加到的项目的堆栈视图，如果项目不在堆栈中，则为 null。

4、StackView.visible : bool

所附加的项目的可见性。

附加信号成员

1、activated()

当附加到的项目在堆栈中被激活时，会发出此附加信号。

2、activating()

当附加到的项目正在堆栈中被激活时，会发出此附加信号。

3、deactivated()

当附加到的项目在堆栈中被停用时，会发出此附加信号。

4、deactivating()

当附加到的项目正在堆栈中被移除时，会发出此附加信号。

5、removed()

当附加到的项目已从堆栈中删除时，会发出此附加信号。它可用于安全地销毁被压入堆栈的 Item，例如：

Item {StackView.onRemoved: destroy()}

1、void clear(transition)

从堆栈中移除所有项目。可以选择指定转换。支持的转换：

StackView.Immediate：立即清除堆栈而不进行任何转换（默认）。

StackView.PushTransitionStackView.ReplaceTransitionStackView.PopTransitionimport QtQuickimport QtQuick.ControlsApplicationWindow {title: qsTr("Hello World")width: 640height: 480visible: trueStackView{id: stackinitialItem: mainViewanchors.fill: parentpushExit : Transition {PropertyAnimation {property: "opacity"from: 1to:0duration: 200}PropertyAnimation {property: "y"from: 0to:100duration: 200}}}Component {id: mainViewRow {spacing: 10Button {text: "一个界面进栈"onClicked: stack.push(mainView)}Button {text: "一个界面出栈"enabled: stack.depth > 1onClicked: stack.pop()}Button {text: "clear"onClicked: stack.clear(StackView.PushTransition)}Text {text: "当前界面的栈深度：" + stack.depthComponent.onDestruction: print("销毁item")}}}}

2、Item find(callback, behavior)

搜索特定项目。为堆栈中的每个项目调用回调函数 callback（将项目和索引作为参数），直到回调函数返回 true。返回值是找到的项目。例如：

stackView.find(function(item, index) {return item.isTheOne})

参数二：

StackView.DontLoad：未加载的项目被跳过（不为它们调用回调函数）。StackView.ForceLoad：卸载的项目被强制加载。

3、Item get(index, behavior)

返回堆栈中位置 index 处的项目，如果索引超出范围，则返回 null。

4、Item pop(item, operation)

从堆栈中弹出一个或多个项目。返回从堆栈中删除的最后一项。

参数二见上面的 clear()，默认为 StackView.PopTransition。

5、Item push(item, properties, operation)

将项目推入堆栈，并可选择在项目上应用一组属性。返回成为当前的项目。

stackView.push(rect)stackView.push(rect, {"color": "red"})

可以通过将多个项目作为附加参数或作为数组传递来同时推送多个项目。最后一项成为当前项。 每个项目后面都可以跟一组要应用的属性：

stackView.push(rect1, rect2, rect3)stackView.push(rect1, {"color": "red"}, rect2, {"color": "green"}, rect3, {"color": "blue"})

推入一组项目：

stackView.push([rect1, rect2, rect3])stackView.push([rect1, {"color": "red"}, rect2, {"color": "green"}, rect3, {"color": "blue"}])

参数三见上面的 clear()，默认为 StackView.PushTransition。

6、Item replace(target（被替换者）, item（替换者）, properties, operation)

替换堆栈上的一个或多个项目，并可选择在项目上应用一组属性。返回成为当前的项目。

如果指定了 target 参数，则替换该项目项目。如果 target 为 null，则堆栈中的所有项目都将被替换。如果未指定，则仅替换顶部的项目。

如果替换项是 Component 或 url，StackView 会自动创建一个实例。

参数三指定替换项的初始属性值映射。

替换栈顶的项目：

stackView.replace(rect)stackView.replace(rect, {"color": "red"})

可以通过将多个项目作为附加参数或作为数组传递来同时替换多个项目。 每个项目后面都可以跟一组要应用的属性。

传递可变数量的参数：

stackView.replace(rect1, rect2, rect3)stackView.replace(rect1, {"color": "red"}, rect2, {"color": "green"}, rect3, {"color": "blue"})

替换一组项目：

stackView.replace([rect1, rect2, rect3])stackView.replace([rect1, {"color": "red"}, rect2, {"color": "green"}, rect3, {"color": "blue"}])

参数四见上面的 clear()，默认为 StackView.ReplaceTransition。

以下示例使用 replace() 来使用 push 和 pop 转换。

import QtQuickimport QtQuick.ControlsApplicationWindow {title: qsTr("Hello World")width: 640height: 480visible: trueStackView {id: stackViewanchors.fill: parentinitialItem: Component {id: pagePage {Row {spacing: 20anchors.centerIn: parentButton {text: "<"onClicked: stackView.replace(page, StackView.PopTransition)}Button {text: ">"onClicked: stackView.replace(page, StackView.PushTransition)}}}}}}

【领QT开发教程学习资料，点击下方链接莬费领取↓↓，先码住不迷路~】

点击这里：Qt资料领取（视频教程+文档+代码+项目实战）