Qt Quick之StackView具体解释(1)
Qt Quick中有个StackView。我在《Qt Quick核心编程》一书中没有讲到。近期有人问起,趁机学习了一下,把它的基本使用方法记录下来。
我准备分两次来讲。第一次讲主要的使用方法。包含StackView的适用场景、基本属性和方法的使用方法。第二次讲一些略微复杂点的东西,比方被StackView管理的view的生命周期、delegate定制、查找等。
演示样例会用到动态创建组建,能够參考我之前的文章“Qt Quick 组件与对象动态创建具体解释”。也会用到锚布局。參考“Qt Quick 布局介绍”。还会用到Button、Rectangle、MouseArea、Text等基本元素,请參考《Qt Quick核心编程》一书。
StackView介绍
StackView实现了一个栈式的导航。“栈”大家都知道是怎么回事儿,就是一种数据结构,先进后出(FILO),支持pop、push等操作。StackView用于栈相似的行为方式管理一系列的View(页面或视图),这些View之间可能有内在联系,依据业务须要,能够一级一级向深处的跳转。当前的View上发生点儿什么事儿,就可能会产生一个新的View或返回之前的页面。
举两个简单的场景。
比方注冊账号这个场景,有一种做法是分几个步骤,比方第一步先让你输入username、password,你点击下一步之后呢,会出现新的页面。接着让你输入姓名、爱好、邮箱、社交方式等。
比方你在某个招聘站点提交简历,先是填写基本信息,如姓名、毕业院校、联系方式、求职意向等,然后下一步,就让你加入工作经验……一路Next下去就可以。讲到这里你能够看看我之前写的一篇文章。史上最全的程序猿求职渠道总结。
StackView是FocusScope的子类,FocusScope是Item的子类。从这个继承关系来看,StackView要作为一个Window的孩子(孩子的孩子也能够。孩子的孩子的孩子也能够……)来使用。当然假设你用QQuickView来载入main.qml的话,StackView也能够作为main.qml的根节点,不必嵌套在一个Window里。
StackView有几个属性:
- busy 指示StackView是否正在应用过渡动画。为true时表示正在应用动画。能够通过属性变化信号处理器onBusyChanged来响应busy属性变化,结合我们的业务需求来做一些处理,比方在动画期间禁止用户点击。
- currentItem 指向栈顶的View(Item),可能为空。
- delegate 用于定制页面切换时的过渡动画。
- depth 栈的深度,StackView中没有子页面时。depth为0。有一个子页面时。depth为1……
- initialItem 初始的View(Item)。
我们能够通过这个属性来指定StackView管理的第一个页面(View),假设你在初始化时给initalItem赋值,效果就相当于我们在Component.onCompleted信号处理器中调用 push(yourItem)。假设你不显式给initalItem赋值,当第一个页面被push进StackView时。这个属性也会被自己主动赋值。
StackView有几个方法:
- clear()。顾名思义。干掉StackView管理的全部页面
- pop(item),出栈操作。无參调用pop时,讲栈顶的页面弹出。假设带參数,则将參数指定的页面之后的全部页面都弹出。举个样例吧,如今栈内页面时酱紫的,[A,B,C,D,E],pop()调用后。就变为[A,B,C,D]。你再调用pop(B),就会变成[A,B]。
- push(item),入栈操作,參数是Item。将一个页面压入StackView。这个页面(Item)通常是动态创建的。
待会儿我们的演示样例能够看到。有一个特别的使用方法,能够替换栈顶元素,比方你的栈是[A,B,C,D],push(E, replace),就会用E替换栈顶的D,栈就会变为[A,B,C,E]。关于push,另一些其他使用方法。參考Qt帮助吧。
- find(func, onlySearchLoadedItems),查找StackView管理的某个页面。
find将对栈内的每一个页面应用func方法,当func返回true时。表示找到了,查找过程就会停止,然后find会返回找到的那个Item。
- completeTransition(),马上结束过渡动画。
再啰嗦几句吧。
StackView本身事实上是一个正常的Item。这从它的类继承关系能够看出来。
所以呢,你能够指定它的大小(width、height),也能够使用anchors等布局。StackView管理的页面,都会作为StackView的孩子,这些子View们,默认会充满StackView的可用区域,我们不能使用anchors来布局子页面,假如你为子View使用了anchors,那页面切换时的动画效果就会失效。
另一点,指定子页面的大小(width、height)也无论用。所以。省事儿啦。
StackView演示样例
设计了一个很easy的演示样例,效果例如以下图所看到的:
我们看到。在上面的GIF中,点击Nextbutton会新创建一个页面并将这个页面加入到StackView中,页面切换时有一个动画效果。这个动画效果是StackView提供的默认效果。假设我们想改变它。就能够通过delegate属性来定制。
全部代码在这里了:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
Window {
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几个button,在这些button的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核心编程》。
我开通了微信订阅号“程序视界”,关注就可以第一时间看到我的原创文章以及我推荐的精彩文章:
Qt Quick之StackView具体解释(1)的更多相关文章
- Qt Quick之StackView具体解释(2)
在"StackView具体解释(1)"中,我们学习了StackView的基本使用方法,这次呢,我们来讲delegate的定制.被管理的View的生命周期.查找View等主题. 本文 ...
- Qt Quick 之 PathView 具体解释
PathView ,顾名思义,沿着特定的路径显示 Model 内的数据. Model 能够是 QML 内建的 ListModel . XmlListModel ,也能够是在 C++ 中实现的 QAbs ...
- Qt Quick实现的涂鸦程序
之前一直以为 Qt Quick 里 Canvas 才干够自绘.后来发觉不是,原来还有好几种方式都能够画图! 能够使用原始的 OpenGL(Qt Quick 使用 OpenGL 渲染).能够构造QSGN ...
- Qt Quick综合实例之文件查看器
假设你基于Qt SDK 5.3.1来创建一个Qt Quick App项目,项目模板为你准备的main.qml文档的根元素是ApplicationWindow或Window.这次我们就以Applicat ...
- Qt on Android: Qt Quick 之 Hello World 图文具体解释
在上一篇文章,<Qt on Android:QML 语言基础>中,我们介绍了 QML 语言的语法,在最后我们遗留了一些问题没有展开,这篇呢,我们就正式開始撰写 Qt Quick 程序,而那 ...
- Qt Quick 组件和动态创建的对象具体的解释
在<Qt Quick 事件处理之信号与槽>一文中介绍自己定义信号时,举了一个简单的样例.定义了一个颜色选择组件,当用户在组建内点击鼠标时,该组件会发出一个携带颜色值的信号,当时我使用 Co ...
- Qt Quick 之 QML 与 C++ 混合编程具体解释
Qt Quick 技术的引入.使得你能够高速构建 UI ,具有动画.各种绚丽效果的 UI 都不在话下.但它不是万能的.也有非常多局限性,原来 Qt 的一些技术,比方低阶的网络编程如 QTcpSocke ...
- Qt 学习之路 :Qt Quick Controls
自 QML 第一次发布已经过去一年多的时间,但在企业应用领域,QML 一直没有能够占据一定地位.很大一部分原因是,QML 缺少一些在企业应用中亟需的组件,比如按钮.菜单等.虽然移动领域,这些组件已经变 ...
- Qt Quick 事件处理之信号与槽
前面两篇文章<QML 语言基础>和<Qt Quick 简单教程>中我们介绍了 QML 语言的基本的语法和 Qt Quick 的常见元素,亲们,通过这两篇文章,您应该已经能够完毕 ...
随机推荐
- TOJ 3134: 渊子赛马修改版
3134: 渊子赛马修改版 Time Limit(Common/Java):1000MS/3000MS Memory Limit:65536KByteTotal Submit: 458 ...
- Git 撤消操作
修改最后一次提交 有时候我们提交完了才发现漏掉了几个文件没有加,或者提交信息写错了.想要撤消刚才的提交操作,可以使用 --amend 选项重新提交: $ git commit --amend 此命令将 ...
- SPOJ QTREE Query on a tree V ——动态点分治
[题目分析] QTREE4的弱化版本 建立出分治树,每个节点的堆表示到改点的最近白点距离. 然后分治树上一直向上,取min即可. 正确性显然,不用担心出现在同一子树的情况(不会是最优解),请自行脑补. ...
- 刷题总结——教主的魔法(bzoj3343)
题目: Description 教主最近学会了一种神奇的魔法,能够使人长高.于是他准备演示给XMYZ信息组每个英雄看.于是N个英雄们又一次聚集在了一起,这次他们排成了一列,被编号为1.2.…….N. ...
- cf287D Shifting
John Doe has found the beautiful permutation formula. Let's take permutation p = p1, p2, ..., pn. Le ...
- spring security 登录、权限管理配置
登录流程 1)容器启动(MySecurityMetadataSource:loadResourceDefine加载系统资源与权限列表) 2)用户发出请求 3)过滤器拦截(MySecurityFil ...
- 【索引】理解MySQL——索引与优化
MySQL 索引 MySQL索引的建立对于MySQL的高效运行是很重要的,索引可以大大提高MySQL的检索速度. 打个比方,如果合理的设计且使用索引的MySQL是一辆兰博基尼的话,那么没有设计和使用索 ...
- Laravel5.1 报错:控制器不存在
Laravel5.1 报错:控制器不存在 错误提示: Class App\Http\Controllers\Api/UserController does not exist 解决: (1)检查控制器 ...
- raspi集成库及安装
原文:http://blog.csdn.net/xukai871105/article/details/12684617 树莓派来自国外,国外嵌入式开源领域具有良好的分享精神,树莓派各种集成库也层 ...
- stm32f103c8t6命名
stm32f103c8t6和stm32f103rbt c8:48脚.64k :rb:64脚.128k.