QML调研报告(上)

1、QML浅析报告2011.6.18前言：11.QT引言12.QML简介、用途、好处23.QML示例24.QML详细介绍.34.1界面元素：34.2界面元素属性:34.3布局管理34.4 事件:44.5 状态：states54.6 过渡：Transition64.7 动画：64.8 计时器：Timer64.9 QML拓展：64.10 QML与Javascript74.11 数据模型与视图74.12 QML和QT C+的相互调用75.QML的查看、开发工具85.1 QML Viewer85.2 Qt Creator86.总结8附录一：基本元素的介绍8附录二：图片移动示例10附录三：颜色变化示例12前

2、言： 本文主要是对QML语言的介绍，主要涉及QML简介，QML示例，QML基本语法、QML高级应用、QML与Javascript、QML与QT C+的相互调用、QML的运行、开发工具等。重点在QML基本语法的介绍。部分内容引自互联网相关文档，未能全部加上标注，所以仅限内部交流使用！1. QT引言Qt是诺基亚开发的一个跨平台的C+图形用户界面应用程序框架。它提供给应用程序开发者建立艺术级的图形用户界面所需的所用功能。基本上，Qt 同 X Window 上的 Motif，Openwin，GTK 等图形界 面库和 Windows 平台上的 MFC，OWL，VCL，ATL 是同类型的东西，但Qt具有优

3、良的跨平台特性、面向对象 、丰富的API、大量的开发文档等优点。（from 百科）2.QML简介、用途、好处 QT 4.7引入Qt Quick(Qt User Interface Creation Kit). 技术包括: Declarative markup language: QML Qt提供了运行库支持 Qt Creator IDE 支持QML language 可视化设计工具 提供了C+ API 将QML加入到Qt的应用中- QtDeclarative QML (Qt Meta-Object Language)，是Qt推出的Qt Quick技术的一部分，是一种新增的简便易学的语言。QML

4、是一种陈述性语言，用来描述一个程序的用户界面。文件格式以.qml结尾。语法格式非常像CSS，但又支持javacript形式的编程控制。在QML，一个用户界面被指定为具有属性的对象树。 这使得Qt更加便于很少或没有编程经验的人使用。 JavaScript在QML中作为一种脚本语言，对QML进行逻辑方面的编程。 它结合了QtDesigner UI和QtScript的优点。QtDesigner可以设计出.ui界面文件,但是不支持和Qt原生C+代码的交互。QtScript可以和Qt原生代码进行交互，但是有一个缺点，如果要在脚本中创建一个继承于QObject的图形对象非常不方便，只能在Qt代码中创建图形

5、对象，然后从QtScript中进行访问。而QML可以在脚本里创建图形对象，并且支持各种图形特效，以及状态机等，同时又能跟Qt写的C+代码进行方便的交互，使用起来非常方便。.3.QML示例 第一个例子：HelloWorld.qml 效果图： Tips： 这就是QML版的HelloWorld，可以看到QML语法规则与Javascript语法类似。代码中的Rectangle被称作界面元素，它是QML语言中基本的单位，QML实现的界面就是由许多这样的界面元素通过布局和位置管理完成的。可以看到，Rectangle同其名字一样，它就是描述一个矩形的，每个界面元素后面跟着一对大括号，里面是对此元素的属性，用

6、于描述此元素的具体信息。例如上例中的width，hight等。不同元素的位置通过布局和位置管理完成，还可以通过设置元素的z属性来确定元素的显示的先后顺序。具体信息见下一部分。4.QML详细介绍. 4.1 界面元素： 界面元素（如上例中的Rectangle）是QML实现的界面中的基本单位。多个元素平行定义。QML提供了很多定义好的界面元素（当然你也可以自己定义），较为常用的有：Item, Rectangle, Image, Text, MouseArea, WebView,ListView等。 4.2界面元素属性: 界面元素属性是用来描述界面元素信息的，位置在界面元素名称后的一对大括号中，每一属

7、性独占一行，多个属性放在一行时，之间要加逗号分开。同样QML提供了丰富的界面元素属性。主要有：x, y, z 属性、width 、height、anchors、opacity、rotation、scale、visibility (true/false)、parent 或children、key event handling等。具体参见 QT Assistant->QML Elements 4.3布局管理 有了被属性描述的界面元素后，在给界面元素加上布局就能实现简单的组合界面了。QML提供了两种布局管理方法：Anchor 布局管理和布局器。 1)Anchor布局管理： Anchor(部分资

8、料中翻译为锚，好像不是很官方）。上文提到元素的parent和children属性，children元素的位置可以参考parent元素的位置(就是通过Anchor实现)，也可以参考兄弟children的位置。每个QML元素都可以认为有6个方位和4个边缘: 方位用来说明不同组件之间的位置信息 如：Rectangle id: rect1; . Rectangle id: rect2; anchors.left: rect1.right; . 2）布局器 1.Grid布局（网格布局） 2.Row布局（纵向布局） 3.Column布局（横向布局） 具体实现即在大括号中添加基本元素，并用spacing属性

9、设置各元素的间距像素数。此外三种布局器可以嵌套使用。个人认为比较像Java Swing中的网格布局、流布局。但比其更简单。通过查看demo，发现Anchor布局更常用。 4.4 事件: 1）鼠标事件 鼠标事件在界面元素中加入MouseArea元素，MouseArea元素中设置相应的属性来设置事件。（注意使用Anchor方法可以调到父元素的相应属性）。有两种方法具体实现处理鼠标事件：信号处理即信号槽、动态属性绑定。 信号槽机制和QT中一致，不细描述。动态绑定属性机制主要是通过元素的id来调用实现。两种方法实现如下： Tips：关于是用信号槽还是动态属性绑定，网上说法不一，我总结了一下，总体声音是

10、信号槽更容易使用。比较正式一点的说法是：使用原则是避免使用过多的Javascript代码。 2）键盘事件 TextInput和TextEdit两个元素使用到键盘事件。（前者为单行文本，后者为多行文本）同普通界面元素一样，可以设置其长度，位置，颜色等属性。特殊性在于，可设置focus属性觉得焦点停留的位置，也可以KeyNavigation属性设置其快捷键功能。（个人感觉这个功能不错，可用于游戏中快捷键的设置。_） Tips：以上四个方面就是QML基础内容，通过这些功能，基本可以实现了具有丰富内容的界面。下面的部分，个人觉得算是中等内容，主要讲述元素的状态、过渡、动画效果三部分。听名字可以想象，其

11、实现效果就是决定元素显隐性、一个界面元素到另一个界面元素的过渡及过渡效果。 4.5 状态：states QML中通过States来管理拥有ID的元素状态（注意要有元素Id哦！），之所以是states是复数形式，说明元素可以拥有多个state。（此处注意states后面跟着的是，里面放着多个state，之间有逗号隔开。State后隔着一对，里面是对此state的具体描述，包括name和PropertyChanges属性）。每一个元素拥有一个默认状态，可以设置when属性来决定状态的变化。States的用途：可以修改自身和parent的相关属性，或者调用一段javascript代码（个人感觉此功能

12、十分有用！） 4.6 过渡：Transition 过渡配合下一部分的动画结合起来，实现不同元素的切换。此功能使得QML能开发出十分华丽的界面。过渡只能被状态切换激活，也就是说没有状态切换就没有过渡。（好像是废话哈）。过渡中的动画可以以串行或者并行的方式执行， 通过设置to 和from 属性，我们可以指定与特定状态绑定的动画，过渡可以被设置为reversible (默认false)。 4.7 动画： 通过SequentialAnimation、ParallelAnimation,、PauseAnimation来设置串并行执行动画。 通过PropertyAnimation、NumberAnimat

13、ion、ColorAnimation设置属性动画的具体内容。通过Behavior可以设置属性行为。 4.8 计时器：Timer Timer元素是一个常用元素，在此特别标出。只提供了一个简单的信号: onTriggered，可是单次的或者重复的计时器。 部分代码： Timer interval: 500; running: true; repeat: true onTriggered: time.text = Date().toString() Text id: time Tips：通过以上的八种元素已经可以完成很复杂的界面功能了。试想一下还缺少什么。如果没有想要的元素怎么办，QML功能不够强大

14、怎么办？所以接下来跳过QML的高级部分（数据模型和视图）进入元素拓展和QML中javascript的使用。 补充：多个界面元素放在一起就叫做一个元素块。元素块中多个元素是平行的，通过布局来管理位置。 4.9 QML拓展：QML允许拓展元素类型，（这也是其强大之处所在）。你可以定义一个新的元素，如BigRectangle。那么新建一个BigRectangle.qml，内容中设置其属性，这样可以在其他.qml文件中直接饮用BigRectangle元素了。此外你也可以修改QML已经提供好的元素，方法一样。 4.10 QML与Javascript JavaScript在QML中作为一种脚本语言，对QM

15、L进行逻辑方面的编程。有两种方式在QML中使用Javascript，一种是内嵌到qml文件中，里一种是写入到独立的.js文件中，在qml中通过import导入进来。前面已经介绍了，在多个方面可以调用js函数，修改相应属性。 Tips：通过以上十个方面，视觉优美，功能强大的界面就可以实现啦！但是作为强大的QML语言，这还是基本东西，下面是部分高级功能，主要有数据模型与视图、QML和QT C+的相互调用。但是由于时间较短，和C+功底的缺乏，个人未能就此部分理解的深入一些。只能做简单介绍。 4.11 数据模型与视图（以下是资料中的描述，个人不是很懂。） QML使用了与Qt中Model-View类似的

16、结构 模型类提供了数据 模型可以使QML的简单数据，或者复杂的C+数据 QML: ListModel, XmlListModel, VisualItemModel C+: QAbstractItemModel, QStringList, QList<QObject*> 视图显示模型提供的数据 ListView, GridView, PathView, Repeater (all QML) 都自动支持滚动 代理为视图创建模型中数据的实例 Highlight 控件用来高亮视图里面的选中item 4.12 QML和QT C+的相互调用 （以下是资料中的描述，个人不是很懂。） 1）C+中使

17、用QML 为了在C+中使用QML在QtDeclarative中有三个主要的类 QDeclarativeEngine、QDeclarativeComponen、QDeclarativeContext 很多QML元素也有对应方法获取用C+创建好的元素实例 Item <-> QDeclarativeItem Scale <-> QGraphicsScale Blur <-> QGraphicsBlurEffect 为了使用QtDeclarative 在的工程文件中.pro加入下面的内容: QT += declarative 要在在Qt/C+中访问QML都必须有一个

18、QDeclarativeEngine实例。其功能是： 提供在C+中初始化QML控件的环境 可以通过它来配置全局的QML设置 如果要提供不同的QML设置，需要实例化多个QDeclarativeEngine 2)QML中调用C+ 所有Qobject对象的public的槽方法都可以在QML中调用。如果你不想你的方法是槽方法，可以使用Q_INVOKABLE、Q_INVOKABLE void myMethod();这些方法可以有参数和返回值。目前支持下面的类型: bool unsigned int, int, float, double, real QString, QUrl, QColor QDate

19、, QTime, QDateTime QPoint, QPointF, QSize, QSizeF, QRect, QRectF QVariant Tips：以上就是对QML和C+相互调用的简单了解，在此提示以下，在Qt Creater（对于这个东东，以下会有介绍）中，可以自动生成部分C+代码，也可以把QML文件生成exe文件。5.QML的查看、开发工具 5.1 QML ViewerQt提供了一个工具QML Viewer可以查看.qml文件生成的效果，该程序在Qt的bin目录下。（不过这个有版本的限制，因为QML是从4.7版本才有的功能，老版本的QML Viewer不能打开新的qml文件，只是

20、我在后面那台机子上不能运行我的qml文件，他用的是qt4.5和qt sdk2010.5版，都不能运行）。 5.2 Qt Creator Qt Creator是一个用于Qt开发的轻量级跨平台集成开发环境。Qt Creator可带来两大关键益处：提供首个专为支持跨平台开发而设计的集成开发环境 (IDE)，并确保首次接触Qt框架的开发人员能迅速上手和操作。Qt Creator包含了一套用于创建和测试基于Qt应用程序的高效工具，包括：一个高级的C+代码编辑器 、上下文感知帮助系统、可视化调试器、源代码管理、项目和构建管理工具。（个人认为不是开放强大的C+应用，Qt Creator是一个不错的IDE，唯

21、一感觉不好的地方，就是不能保持上次打开的工程，每次都得新打开工程，好像不是设置问题。）6.总结 在一周的QML学习中认识到，正如官网描述的那样，QML十分容易上手，即便是没有QT编程经验的人（正如我）也可以在短时间内理解其语法规则。此外QML功能强大，可以设计出十分华丽的界面，官方发布的开发工具也十分给力。作为一种界面编程语言，QML算是十分优秀。个人感觉其最大的优点在于可扩展性。即可以元素类型扩展，也可以C+拓展。但是由于知识欠缺，未能全面了解其精髓，也不能保证本文中部分内容的权威性，只能算是技术交流吧。不足之处还望大家不吝赐教。在一个周的工作中，得到了田老师和各位同事的帮助，也感到了大家的

22、热心与工作的快乐，在此谢谢大家。附录一：基本元素的介绍（仅供参考）基本可视化项Item基本的项元素 在QML中所有可视化的向都继承他Rectangle基本的可视化矩形元素Gradient定义一个两种颜色的渐变过程GradientStop定义个颜色，被Gradient使用Image在场景中使用位图BorderImage(特殊的项)定义一张图片并当做边界AnimatedImage为播放动画存储一系列的帧Text在场景中使用文本TextInput显示可编辑为文本IntValidator int验证器DoubleValidator double验证器RegExpValidator验证字符串正则表达式T

23、extEdit显示多行可编辑文本基本的交互项MouseArea鼠标句柄交互FocusScope键盘焦点句柄Flickable提供一种浏览整张图片的一部分的效果,具体看例子Flipable提供一个平面，可以进行翻转看他的前面或后面,具体看例子状态State定义一个配置对象和属性的集合PropertyChanges使用一个State描述属性的改变StateGroup包含一个状态集合和状态变换ParentChange重新定义父集，也就是换个父节点AnchorChanges在一个状态中改变anchors动画和变换Behavior默认的属性变换动画SequentialAnimation对定义的动画串行播

24、放ParallelAnimation对定义的动画并行播放PropertyAnimation属性变换动画NumberAnimation对实数类型属性进行的动画Vector3dAnimation对QVector3d进行的属性ColorAnimation颜色进行的变换动画RotationAnimation对旋转进行的变换动画ParentAnimation对父节点进行变换的动画，改变绑定的父节点AnchorAnimation对anchor进行改变的动画PauseAnimation延迟处理SmoothedAnimation允许属性平滑的过度SpringAnimation一种加速的效果PropertyAc

25、tion允许在动画过程中对属性的直接改变ScriptAction允许动画过程中调用脚本Transition在状态变换中加入动作变化工作中的数据Binding在创建的时候绑定一些数据到一些属性ListModel定义链表数据ListElement定义ListModel的一个数据项VisualItemModel包含可视化项(visual items)到一个view中，相当是一个容器VisualDataModel包含一个model和一个delegate，model包含需要的数据，delegate设计显示的项的信息，具体的去看例子Package他的目的是把VisualDataModel共享给多个view

26、，具体还要学习XmlListModel特殊的一个模式使用XPath表达式，使用xml来设置元素XmlRole XmlListModel的一个特殊的角色试图ListView提供一个链表显示模型试图GridView提供一个网格显示模型试图PathView提供一个内容沿着路径来显示的模型Path定义一个PathView使用的轨迹PathLine定义一个线性的轨迹PathQuad定义一个二次贝塞尔曲线的轨迹PathCubic定义一个三次贝塞尔曲线的轨迹PathAttribute允许绑定一个属性上，具体看例子PathPercent修改item分配的轨迹不是很明了其中的意思WebView允许添加网页内容到

27、一个canvas上定位器Column整理它的子列(纵)Row整理它的子行(横)Grid设置它的子到一个网格上Flow目的是不让他的子项重叠在一起实用Connections明确连接信号和信号句柄Component封装QML items想一个组件一样Timer提供时间触发器QtObject基本的元素只包含objectName属性Qt qml全局Qt object提供使用的枚举和函数WorkerScript允许在QML使用线程Loader控制载入item或组件Repeater使用一个模型创建多个组件SystemPalette为Qt palettes提供一个通道FontLoader载入字体根据名字或U

28、RLLayoutItem允许声明UI元素插入到qtGraphicsView布局中变换Scale分派item缩放行为Rotation分派item旋转行为Translate分派item移动行为附录二：图片移动示例（使用了鼠标事件和过渡动画） 实现结果：附录三：颜色变化示例（使用了元素拓展）QML调研续2011.6.241.数据类型与视图21.1 列表视图ListView示例21.2网格视图 GridView示例31.3路径视图 PathView示例61.4 Flickable72.QML与QT/C+交互71.示例一：QML调用C+中设置好的元素82.示例二：93. QML程序打包运行131.数据类

29、型与视图 QML使用了与Qt中Model-View类似的结构，即模型视图结构。模型可以是QML的简单数据，或者复杂的C+数据。具体有： QML: ListModel, XmlListModel, VisualItemModel C+: QAbstractItemModel, QStringList, QList<QObject*> 视图显示模型提供的数据，主要有：ListView, GridView, PathView Model定义好数据，通过Delegate来描述Model中每条数据在View具体显示的控件。 1.1 列表视图ListView示例运行效果图： 1.2网格视图 GridView示例运行效果图：1.3路径视图 PathView示例 1.4 Flickable 可以让它的孩子元素可以被拖拽和滚动，但却不用创建一个MouseArea或者处理鼠标事件。好处：Flickable界面很容易通过属性配置，flickDirection, flickDeceleration,ho