QML 学习摘录 06
来源:互联网 发布:四方麻将 软件工作室 编辑:程序博客网 时间:2024/05/29 02:40
QML中模型/视图/代理
模型Model指的是数据;视图View指显示,可视化的处理;Model-View概念的提出是为了实现数据与显示的分离。代理Delegate将模型和视图链接起来。
例如电话簿程序中,电话簿中的数据(名字,号码等)由Model提供,View中的每个数据都是Delegate来实现可视化,View的作用是排列这些Delegate提供的项。
1、基础模型
模型/视图最基本的用法是Repeater元素。它被用作实例化一组元素项。
下面的例子,将链表模型ListModel中的每个元素绑定到属性上,每个元素中的属性链接到repeater实例化的子项上(name属性被链接到text)。
import QtQuick 2.3Column { y:5 spacing: 2 ListModel { id: listModel ListElement {name: "Apple";cost: 2.45} ListElement {name: "Orange";cost: 3.25} ListElement {name: "Banana";cost: 1.95} } Repeater { model: listModel Rectangle { width: 100;height: 20 radius: 3 color: "lightblue" anchors.horizontalCenter: parent.horizontalCenter Text { anchors.centerIn: parent text: index+":"+name } } }}
运行结果:
2、动态视图
Repeater元素适合有限的静态数据,但是在真正使⽤时,模型通常更加复杂和庞⼤,我们需要⼀个更加智能的解决⽅案。QtQuick提供了ListView和GridView元素,这两个都是基于Flickable(可滑动)区域的元素,因此⽤户可以放⼊更⼤的数据。同时,它们限制了同时实例化的代理数量。对于⼀个⼤型的模型,这意味着在同⼀个场景下只会加载有限的元素。
2.1 ListView
ListView与Repeater元素相似,它使⽤了⼀个Model,使⽤Delegate来实例化,并且在两个delegate之间能够设置间隔sapcing。下⾯的列表显⽰了怎样设置⼀个简单的链表。
import QtQuick 2.0Rectangle { //x:10; y: 5 ListView { id: view anchors.fill: parent anchors.margins: 10 clip: true model: 100 delegate: numberDelegate spacing: 5 boundsBehavior: Flickable.DragOverBounds //末尾行为 snapMode: ListView.SnapToItem //限制一个视图内元素的停止位置 //orientation: ListView.Horizontal//方向 highlight: hightlightComponent highlightFollowsCurrentItem: true highlightRangeMode: ListView.NoHighlightRange //控制高亮如何显示 highlightMoveDuration: 500 focus: true header: header footer: footer } Component {//页脚 id: footer Rectangle { width: view.width height: 20 radius: 3 color: "gray" Text {anchors.centerIn: parent;text: "footer"} } } Component {//页眉 id: header Rectangle { width: view.width height: 20 radius: 3 color: "gray" Text {anchors.centerIn: parent;text: "header"} } } Component { id: numberDelegate Item { width: view.width height: 30 Text { anchors.centerIn: parent text: index } MouseArea { anchors.fill: parent onClicked: { view.currentIndex = index } } } } Component {//高亮 id: hightlightComponent Rectangle { width: view.width radius: 3 color: "yellow" } }}
运行预览:
2.2 GridView
使⽤网格视图(GridView)与使⽤链表视图(ListView)的⽅式⾮常类似。真正不同的地⽅是GridView使⽤了⼀个⼆维数组来存放元素,⽽ListView是使⽤的线性链表来存放元素。GridView不依赖于元素间隔和⼤⼩来配置元素。它使⽤单元宽度(cellWidth)与单元⾼度(cellHeight)属性来控制数组内的⼆维元素的内容。每个元素从左上⾓开始依次放⼊单元格。
import QtQuick 2.0Rectangle { y: 5 GridView { anchors.fill: parent anchors.margins: 20 clip: true model: 100 cellWidth: 45;cellHeight: 45 delegate: numberDelegate flow:GridView.RightToLeft;//方向 } Component { id: numberDelegate Rectangle { width: 40;height: 40 color: "lightGreen" Text {anchors.centerIn: parent;font.pixelSize: 10;text:index} } }}
运行预览:
3.代理
当使⽤模型与视图来⾃定义⽤户界⾯时,代理在创建显⽰时扮演了⼤量的⾓⾊。在模型中的每个元素通过代理来实现可视化,⽤户真实可见的是这些代理元素。每个代理访问到索引号或者绑定的属性,⼀些是来⾃数据模型,⼀些来⾃视图。来⾃模型的数据将会通过属性传递到代理。来⾃视图的数据将会通过属性传递视图中与代理相关的状态信息。
在下面的例子中我们可以看到代理的背景色color与视图的isCurrentItem 属性绑定(01)。
动态增加/删除元素
在某些情况下,视图中的显⽰内容会随着时间⽽改变。由于模型数据的改变,元素会添加或者移除。在这些情况下,⼀个⽐较好的做法是使⽤可视化队列给⽤户⼀个⽅向的感觉来帮助⽤户知道哪些数据被加⼊或者移除。
为了⽅便使⽤,QML视图为每个代理绑定了两个信号,onAdd和onRemove。下⾯这个例⼦演⽰了如何动态填充⼀个GridModel。在屏幕下⽅,有⼀个添加新元素的按钮。当点击它时,会调⽤模型的append⽅法来添加⼀个新的元素。这个操作会触发视图创建⼀个新的代理,并发送GridView.onAdd信号。SequentialAnimation队列动画与这个信号连接绑定,使⽤代理的scale属性来放⼤视图元素(02)。
import QtQuick 2.0Rectangle { y: 5 ListModel{ id:listModel ListElement{number :0} ListElement{number :1} ListElement{number :2} ListElement{number :3} ListElement{number :4} } GridView { id: view anchors.fill: parent anchors.margins: 20 clip: true model: listModel delegate: numberDelegate focus: true } Rectangle{ anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom anchors.margins: 20 height: 40 color:"lightblue" border.color: Qt.lighter(color,1.1) Text{anchors.fill:parent;text:"add item"} MouseArea{ anchors.fill: parent onClicked: {listModel.append({"number": listModel.count });} } } Component { id: numberDelegate Rectangle { id:wrapper width: 40;height: 40 color: GridView.isCurrentItem ? "red" : "blue"// 01. color与视图的属性绑定 Text { anchors.centerIn: parent font.pixelSize: 14;color:"white" text: number } MouseArea { anchors.fill: parent onClicked: { view.currentIndex = index } } GridView.onAdd:SequentialAnimation{//02.QML为代理绑定的信号,当元素被增加时发送该信号 NumberAnimation{target: wrapper;property:"scale";from:0;to:1;duration: 250} } } }}
运行预览:
更多进阶用法参考原文网址:http://qmlbook.github.io/en/ch06/index.html#advanced-techniques
- QML 学习摘录 06
- QML学习摘录 02
- QML 学习摘录 03
- QML 学习摘录 04
- QML 学习摘录 05
- QML学习摘录 01:初识QML
- qml 学习
- QML学习
- 学习摘录
- QML学习:QML文件当做组件使用
- QML学习(1)
- QML学习(2)
- QML学习(3)
- qml学习入门资料
- qml入门学习小结
- qml学习资源
- 《QML HelloWorld》学习笔记
- QML学习实例
- 文章标题
- JavaWeb学习笔记-java基础-2-静态导入
- ORACLE数据库误操作执行了DELETE,该如何恢复数据?
- [转载]兼容性--rem兼容适配解决方案
- VS 无法在web服务器上启动调试。您没有调试web服务器进程的权限
- QML 学习摘录 06
- 编辑器
- JAVA初识(二)
- centos7安装py3,并使得与系统自带的py2共存
- 输入两个字符串的比对,输出从哪一个元素匹配
- 用移动硬盘做系统安装盘或系统运行盘
- HTTP的REST服务简介
- [Leetcode]-Basic Dynamic Programming(1)
- 神奇的贝叶斯思想