QML学习总结（上）

这是之前应任务要求，学习QML时整理的一个文档，下面是从Word中copy过来的，可能格式已经很乱了，有需要的朋友可以浏览一下。想具体查看的话，可以把这个文档下载下来。

下载地址：http://download.csdn.net/source/3543786

QML浅析报告

2011.6.18

前言： 1

1.QT引言 1

2.QML简介、用途、好处 2

3.QML示例 2

4.QML详细介绍. 3

4.1界面元素： 3

4.2界面元素属性: 3

4.3布局管理 3

4.4事件: 4

4.5状态：states 5

4.6过渡：Transition 6

4.7动画： 6

4.8计时器：Timer 6

4.9QML拓展： 6

4.10QML与Javascript 7

4.11数据模型与视图 7

4.12QML和QTC++的相互调用 7

5.QML的查看、开发工具 8

5.1QMLViewer 8

5.2QtCreator 8

6.总结 8

附录一：基本元素的介绍 8

附录二：图片移动示例 10

附录三：颜色变化示例 12

前言：

本文主要是对QML语言的介绍，主要涉及QML简介，QML示例，QML基本语法、QML高级应用、QML与Javascript、QML与QTC++的相互调用、QML的运行、开发工具等。重点在QML基本语法的介绍。部分内容引自互联网相关文档，未能全部加上标注，所以仅限内部交流使用！

1.QT引言

　　Qt是诺基亚开发的一个跨平台的C++图形用户界面应用程序框架。它提供给应用程序开发者建立艺术级的图形用户界面所需的所用功能。

　　基本上，Qt同XWindow上的Motif，Openwin，GTK等图形界面库和Windows平台上的MFC，OWL，VCL，ATL是同类型的东西，但Qt具有优良的跨平台特性、面向对象、丰富的API、大量的开发文档等优点。（from百科）

2.QML简介、用途、好处

QT4.7引入QtQuick(QtUserInterfaceCreationKit).

技术包括:

•Declarativemarkuplanguage:QML

•Qt提供了运行库支持

•QtCreatorIDE支持QMLlanguage

•可视化设计工具

•提供了C++API将QML加入到Qt的应用中------QtDeclarative

QML(QtMeta-ObjectLanguage)，是Qt推出的QtQuick技术的一部分，是一种新增的简便易学的语言。QML是一种陈述性语言，用来描述一个程序的用户界面。文件格式以.qml结尾。语法格式非常像CSS，但又支持javacript形式的编程控制。在QML，一个用户界面被指定为具有属性的对象树。这使得Qt更加便于很少或没有编程经验的人使用。JavaScript在QML中作为一种脚本语言，对QML进行逻辑方面的编程。

它结合了QtDesignerUI和QtScript的优点。QtDesigner可以设计出.ui界面文件,但是不支持和Qt原生C++代码的交互。QtScript可以和Qt原生代码进行交互，但是有一个缺点，如果要在脚本中创建一个继承于QObject的图形对象非常不方便，只能在Qt代码中创建图形对象，然后从QtScript中进行访问。而QML可以在脚本里创建图形对象，并且支持各种图形特效，以及状态机等，同时又能跟Qt写的C++代码进行方便的交互，使用起来非常方便。.

3.QML示例

第一个例子：HelloWorld.qml

效果图：

Tips：

这就是QML版的HelloWorld，可以看到QML语法规则与Javascript语法类似。代码中的Rectangle被称作界面元素，它是QML语言中基本的单位，QML实现的界面就是由许多这样的界面元素通过布局和位置管理完成的。可以看到，Rectangle同其名字一样，它就是描述一个矩形的，每个界面元素后面跟着一对大括号，里面是对此元素的属性，用于描述此元素的具体信息。例如上例中的width，hight等。不同元素的位置通过布局和位置管理完成，还可以通过设置元素的z属性来确定元素的显示的先后顺序。具体信息见下一部分。

4.QML详细介绍.

4.1界面元素：

界面元素（如上例中的Rectangle）是QML实现的界面中的基本单位。多个元素平行定义。QML提供了很多定义好的界面元素（当然你也可以自己定义），

较为常用的有：Item,Rectangle,Image,Text,MouseArea,WebView,ListView等。

4.2界面元素属性:

界面元素属性是用来描述界面元素信息的，位置在界面元素名称后的一对大括号中，每一属性独占一行，多个属性放在一行时，之间要加逗号分开。同样QML提供了丰富的界面元素属性。主要有：x,y,z属性、width、height、anchors、opacity、rotation、scale、visibility(true/false)、parent或children、keyeventhandling等。具体参见QTAssistant--->QMLElements

4.3布局管理

有了被属性描述的界面元素后，在给界面元素加上布局就能实现简单的组合界面了。QML提供了两种布局管理方法：Anchor布局管理和布局器。

1)Anchor布局管理：

Anchor(部分资料中翻译为锚，好像不是很官方）。上文提到元素的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属性设置各元素的间距像素数。此外三种布局器可以嵌套使用。个人认为比较像JavaSwing中的网格布局、流布局。但比其更简单。通过查看demo，发现Anchor布局更常用。

4.4事件:

1）鼠标事件

鼠标事件在界面元素中加入MouseArea元素，MouseArea元素中设置相应的属性来设置事件。（注意使用Anchor方法可以调到父元素的相应属性）。有两种方法具体实现处理鼠标事件：信号处理即信号槽、动态属性绑定。

信号槽机制和QT中一致，不细描述。动态绑定属性机制主要是通过元素的id来调用实现。两种方法实现如下：

Tips：关于是用信号槽还是动态属性绑定，网上说法不一，我总结了一下，总体声音是信号槽更容易使用。比较正式一点的说法是：使用原则是避免使用过多的Javascript代码。

2）键盘事件

TextInput和TextEdit两个元素使用到键盘事件。（前者为单行文本，后者为多行文本）同普通界面元素一样，可以设置其长度，位置，颜色等属性。特殊性在于，可设置focus属性觉得焦点停留的位置，也可以KeyNavigation属性设置其快捷键功能。（个人感觉这个功能不错，可用于游戏中快捷键的设置。^_^）

Tips：以上四个方面就是QML基础内容，通过这些功能，基本可以实现了具有丰富内容的界面。下面的部分，个人觉得算是中等内容，主要讲述元素的状态、过渡、动画效果三部分。听名字可以想象，其实现效果就是决定元素显隐性、一个界面元素到另一个界面元素的过渡及过渡效果。

4.5状态：states

QML中通过States来管理拥有ID的元素状态（注意要有元素Id哦！），之所以是states是复数形式，说明元素可以拥有多个state。（此处注意states后面跟着的是[]，里面放着多个state，之间有逗号隔开。State后隔着一对{}，里面是对此state的具体描述，包括name和PropertyChanges属性）。每一个元素拥有一个默认状态，可以设置when属性来决定状态的变化。

States的用途：可以修改自身和parent的相关属性，或者调用一段javascript代码（个人感觉此功能十分有用！）

4.6过渡：Transition

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

4.7动画：

通过SequentialAnimation、ParallelAnimation,、PauseAnimation来设置串并行执行动画。

通过PropertyAnimation、NumberAnimation、ColorAnimation设置属性动画的具体内容。通过Behavior可以设置属性行为。

4.8计时器：Timer

Timer元素是一个常用元素，在此特别标出。只提供了一个简单的信号:onTriggered，可是单次的或者重复的计时器。

部分代码：

Timer{

interval:500;

running:true;

repeat:true

onTriggered:time.text=Date().toString()

}

Text{

id:time

}

Tips：通过以上的八种元素已经可以完成很复杂的界面功能了。试想一下还缺少什么。如果没有想要的元素怎么办，QML功能不够强大怎么办？所以接下来跳过QML的高级部分（数据模型和视图）进入元素拓展和QML中javascript的使用。

补充：多个界面元素放在一起就叫做一个元素块。元素块中多个元素是平行的，通过布局来管理位置。

4.9QML拓展：

QML允许拓展元素类型，（这也是其强大之处所在）。你可以定义一个新的元素，如BigRectangle。那么新建一个BigRectangle.qml，内容中设置其属性，这样可以在其他.qml文件中直接饮用BigRectangle元素了。此外你也可以修改QML已经提供好的元素，方法一样。

4.10QML与Javascript

JavaScript在QML中作为一种脚本语言，对QML进行逻辑方面的编程。

有两种方式在QML中使用Javascript，一种是内嵌到qml文件中，里一种是写入到独立的.js文件中，在qml中通过import导入进来。前面已经介绍了，在多个方面可以调用js函数，修改相应属性。

Tips：通过以上十个方面，视觉优美，功能强大的界面就可以实现啦！！！但是作为强大的QML语言，这还是基本东西，下面是部分高级功能，主要有数据模型与视图、QML和QTC++的相互调用。但是由于时间较短，和C++功底的缺乏，个人未能就此部分理解的深入一些。只能做简单介绍。

来源:http://www.fourants.com/blog/116.html

4.11数据模型与视图

（以下是资料中的描述，个人不是很懂。）

•QML使用了与Qt中Model-View类似的结构

•模型类提供了数据

•模型可以使QML的简单数据，或者复杂的C++数据

•QML:ListModel,XmlListModel,VisualItemModel

•C++:QAbstractItemModel,QStringList,QList<QObject*>

•视图显示模型提供的数据

•ListView,GridView,PathView,Repeater(allQML)

•都自动支持滚动

•代理为视图创建模型中数据的实例

•Highlight控件用来高亮视图里面的选中item

4.12QML和QTC++的相互调用

（以下是资料中的描述，个人不是很懂。）

1）C++中使用QML

为了在C++中使用QML在QtDeclarative中有三个主要的类

QDeclarativeEngine、QDeclarativeComponen、QDeclarativeContext

很多QML元素也有对应方法获取用C++创建好的元素实例

Item<->QDeclarativeItem

Scale<->QGraphicsScale

Blur<->QGraphicsBlurEffect

为了使用QtDeclarative在的工程文件中.pro加入下面的内容:

QT+=declarative

要在在Qt/C++中访问QML都必须有一个QDeclarativeEngine

实例。其功能是：

•提供在C++中初始化QML控件的环境

•可以通过它来配置全局的QML设置

•如果要提供不同的QML设置，需要实例化多个QDeclarativeEngine

2)QML中调用C++

所有Qobject对象的public的槽方法都可以在QML中调用。如果你不想你的方法是槽方法，可以使用Q_INVOKABLE、Q_INVOKABLEvoidmyMethod();

这些方法可以有参数和返回值。目前支持下面的类型:

•bool

•unsignedint,int,float,double,real

•QString,QUrl,QColor

•QDate,QTime,QDateTime

•QPoint,QPointF,QSize,QSizeF,QRect,QRectF

•QVariant

Tips：以上就是对QML和C++相互调用的简单了解，在此提示以下，在QtCreater（对于这个东东，以下会有介绍）中，可以自动生成部分C++代码，也可以把QML文件生成exe文件。

5.QML的查看、开发工具

5.1QMLViewer

Qt提供了一个工具QMLViewer可以查看.qml文件生成的效果，该程序在Qt的bin目录下。（不过这个有版本的限制，因为QML是从4.7版本才有的功能，老版本的QMLViewer不能打开新的qml文件，只是我在后面那台机子上不能运行我的qml文件，他用的是qt4.5和qtsdk2010.5版，都不能运行）。

5.2QtCreator

QtCreator是一个用于Qt开发的轻量级跨平台集成开发环境。QtCreator可带来两大关键益处：提供首个专为支持跨平台开发而设计的集成开发环境(IDE)，并确保首次接触Qt框架的开发人员能迅速上手和操作。QtCreator包含了一套用于创建和测试基于Qt应用程序的高效工具，包括：一个高级的C++代码编辑器、上下文感知帮助系统、可视化调试器、源代码管理、项目和构建管理工具。（个人认为不是开放强大的C++应用，QtCreator是一个不错的IDE，唯一感觉不好的地方，就是不能保持上次打开的工程，每次都得新打开工程，好像不是设置问题。）

6.总结

在一周的QML学习中认识到，正如官网描述的那样，QML十分容易上手，即便是没有QT编程经验的人（正如我）也可以在短时间内理解其语法规则。此外QML功能强大，可以设计出十分华丽的界面，官方发布的开发工具也十分给力。作为一种界面编程语言，QML算是十分优秀。个人感觉其最大的优点在于可扩展性。即可以元素类型扩展，也可以C++拓展。

但是由于知识欠缺，未能全面了解其精髓，也不能保证本文中部分内容的权威性，只能算是技术交流吧。不足之处还望大家不吝赐教。

在一个周的工作中，得到了田老师和各位同事的帮助，也感到了大家的热心与工作的快乐，在此谢谢大家。

附录一：基本元素的介绍

（仅供参考）

基本可视化项

Item基本的项元素在QML中所有可视化的向都继承他

Rectangle基本的可视化矩形元素

Gradient定义一个两种颜色的渐变过程

GradientStop定义个颜色，被Gradient使用

Image在场景中使用位图

BorderImage(特殊的项)定义一张图片并当做边界

AnimatedImage为播放动画存储一系列的帧

Text在场景中使用文本

TextInput显示可编辑为文本

IntValidatorint验证器

DoubleValidatordouble验证器

RegExpValidator验证字符串正则表达式

TextEdit显示多行可编辑文本

基本的交互项

MouseArea鼠标句柄交互

FocusScope键盘焦点句柄

Flickable提供一种浏览整张图片的一部分的效果,具体看例子

Flipable提供一个平面，可以进行翻转看他的前面或后面,具体看例子

状态

State定义一个配置对象和属性的集合

PropertyChanges使用一个State描述属性的改变

StateGroup包含一个状态集合和状态变换

ParentChange重新定义父集，也就是换个父节点

AnchorChanges在一个状态中改变anchors

动画和变换

Behavior默认的属性变换动画

SequentialAnimation对定义的动画串行播放

ParallelAnimation对定义的动画并行播放

PropertyAnimation属性变换动画

NumberAnimation对实数类型属性进行的动画

Vector3dAnimation对QVector3d进行的属性

ColorAnimation颜色进行的变换动画

RotationAnimation对旋转进行的变换动画

ParentAnimation对父节点进行变换的动画，改变绑定的父节点

AnchorAnimation对anchor进行改变的动画

PauseAnimation延迟处理

SmoothedAnimation允许属性平滑的过度

SpringAnimation一种加速的效果

PropertyAction允许在动画过程中对属性的直接改变

ScriptAction允许动画过程中调用脚本

Transition在状态变换中加入动作变化

工作中的数据

Binding在创建的时候绑定一些数据到一些属性

ListModel定义链表数据

ListElement定义ListModel的一个数据项

VisualItemModel包含可视化项(visualitems)到一个view中，相当是一个容器

VisualDataModel包含一个model和一个delegate，model包含需要的数据，delegate设计显示的项的信息，具体的去看例子

Package他的目的是把VisualDataModel共享给多个view，具体还要学习

XmlListModel特殊的一个模式使用XPath表达式，使用xml来设置元素XmlRoleXmlListModel的一个特殊的角色

试图

ListView提供一个链表显示模型试图

GridView提供一个网格显示模型试图

PathView提供一个内容沿着路径来显示的模型

Path定义一个PathView使用的轨迹

PathLine定义一个线性的轨迹

PathQuad定义一个二次贝塞尔曲线的轨迹

PathCubic定义一个三次贝塞尔曲线的轨迹

PathAttribute允许绑定一个属性上，具体看例子

PathPercent修改item分配的轨迹不是很明了其中的意思

WebView允许添加网页内容到一个canvas上

定位器

Column整理它的子列(纵)

Row整理它的子行(横)

Grid设置它的子到一个网格上

Flow目的是不让他的子项重叠在一起

实用

Connections明确连接信号和信号句柄

Component封装QMLitems想一个组件一样

Timer提供时间触发器

QtObject基本的元素只包含objectName属性

Qtqml全局Qtobject提供使用的枚举和函数

WorkerScript允许在QML使用线程

Loader控制载入item或组件

Repeater使用一个模型创建多个组件

SystemPalette为Qtpalettes提供一个通道

FontLoader载入字体根据名字或URL

LayoutItem允许声明UI元素插入到qtGraphicsView布局中

变换

Scale分派item缩放行为

Rotation分派item旋转行为

Translate分派item移动行为

附录二：图片移动示例

（使用了鼠标事件和过渡动画）

实现结果：

附录三：颜色变化示例

（使用了元素拓展）