Qt Quick中有个StackView,我在《Qt Quick核心编程》一书中没有讲到,最近有人问起,趁机学习了一下,把它的基本用法记录下来。
我准备分两次来讲。第一次讲基本的用法,包括StackView的适用场景、基本属性和方法的用法。第二次讲一些稍微复杂点的东西,比如被StackView管理的view的生命周期、delegate定制、查找等。
示例会用到动态创建组建,可以参考我之前的文章“Qt Quick 组件与对象动态创建详解”。也会用到锚布局,参考“Qt Quick 布局介绍”。还会用到Button、Rectangle、MouseArea、Text等基本元素,请参考《Qt Quick核心编程》一书。
StackView实现了一个栈式的导航。“栈”大家都知道是怎么回事儿,就是一种数据结构,先进后出(FILO),支持pop、push等操作。StackView用于栈类似的行为方式管理一系列的View(页面或视图),这些View之间可能有内在联系,根据业务需要,可以一级一级向深处的跳转,当前的View上发生点儿什么事儿,就可能会产生一个新的View或返回之前的页面。
举两个简单的场景。
比如注册账号这个场景,有一种做法是分几个步骤,比如第一步先让你输入用户名、密码,你点击下一步之后呢,会出现新的页面,接着让你输入姓名、爱好、邮箱、社交方式等。
比如你在某个招聘网站提交简历,先是填写基本信息,如姓名、毕业院校、联系方式、求职意向等,然后下一步,就让你添加工作经验……一路Next下去即可。说到这里你可以看看我之前写的一篇文章,史上最全的程序员求职渠道总结。
StackView是FocusScope的子类,FocusScope是Item的子类。从这个继承关系来看,StackView要作为一个Window的孩子(孩子的孩子也可以,孩子的孩子的孩子也可以……)来使用。当然如果你用QQuickView来加载main.qml的话,StackView也可以作为main.qml的根节点,不必嵌套在一个Window里。
StackView有几个属性:
StackView有几个方法:
再啰嗦几句吧。StackView本身其实是一个正常的Item,这从它的类继承关系可以看出来。所以呢,你可以指定它的大小(width、height),也可以使用anchors等布局。StackView管理的页面,都会作为StackView的孩子,这些子View们,默认会充满StackView的可用区域,我们不能使用anchors来布局子页面,假如你为子View使用了anchors,那页面切换时的动画效果就会失效。还有一点,指定子页面的大小(width、height)也不管用。所以,省事儿啦。
设计了一个非常简单的示例,效果如下图所示:
我们看到,在上面的GIF中,点击Next按钮会新创建一个页面并将这个页面加入到StackView中,页面切换时有一个动画效果。这个动画效果是StackView提供的默认效果,如果我们想改变它,就可以通过delegate属性来定制。
所有代码在这里了:
import QtQuick 2.4import QtQuick.Controls 1.3import QtQuick.Window 2.2Window { title: "StackViewDemo"; width: 480; height: 320; visible: true; StackView { id: stack; anchors.centerIn: parent; width: 600; height: 300; property var home: null; Text { text: "Click to create first page"; font.pointSize: 14; font.bold: true; color: "blue"; anchors.centerIn: parent; MouseArea { anchors.fill: parent; onClicked: if(stack.depth == 0)stack.push(page); } } } Component { id: page; Rectangle { color: Qt.rgba(stack.depth*0.1, stack.depth*0.2, stack.depth*0.3); Text { anchors.centerIn: parent; text: "depth - " + stack.depth; font.pointSize: 24; font.bold: true; color: stack.depth <= 4 ? Qt.lighter(parent.color) : Qt.darker(parent.color); } Button { id: next; anchors.right: parent.right; anchors.bottom: parent.bottom; anchors.margins: 8; text: "Next"; width: 70; height: 30; onClicked: { if(stack.depth < 8) stack.push(page); } } Button { id: back; anchors.right: next.left; anchors.top: next.top; anchors.rightMargin: 8; text: "Back"; width: 70; height: 30; onClicked: { if(stack.depth > 0) stack.pop(); } } Button { id: home; anchors.right: back.left; anchors.top: next.top; anchors.rightMargin: 8; text: "Home"; width: 70; height: 30; onClicked: { if(stack.depth > 0)stack.pop(stack.initialItem); } } Button { id: clear; anchors.right: home.left; anchors.top: next.top; anchors.rightMargin: 8; text: "Clear"; width: 70; height: 30; onClicked: { if(stack.depth > 0)stack.clear(); } } } }}
简单解释一下上面的代码,id为stack的StackView,内部放了一个Text元素,点击时创建第一个页面。页面由内嵌在main.qml中的Component提供。
id为page的组件,顶层元素是个Rectangle对象,颜色由StackView的depth属性决定。这个Rectangle内部,中间放了一个Text,底部放了Clear、Home、Back、Next几个按钮,在这些按钮的onClicked信号处理器中,调用了StackView的clear、pop、push等方法。
你可以使用qmlscene来加载示例qml文档,也可以通过Qt Creator创建一个Qt Quick App来查看效果。建议使用Qt SDK 5.3.0及以上版本。
OK,这次就先到这里了。下次我们来讲StackView管理的页面(View)的生命周期、查找View、动画定制等内容。
更多Qt Quick文章请参考我的Qt Quick专栏,想系统学些Qt Quick(QML),请阅读《Qt Quick核心编程》。
我开通了微信订阅号“程序视界”,关注即可第一时间看到我的原创文章以及我推荐的精彩文章:
联系客服