Qt Quick提供了一套高动态，丰富的QML元素来定制用户界面的说明性框架。Qt Quick有助于
程序开发员与界面设计员的合作为便携式设备建立流畅的用户界面，例如：移动电话、媒体播放器，机
顶盒以及上网本等。Qt Quick包含了QtDeclarative C++模块，QML并且它们全被整合到Qt
Create IDE中。使用QtDeclarative C++模块可以从你的QT应用程序中载入QML文件并与之互动。
QML是对Ja vaScript一种扩展，它提供一种机制使用QML元素来说明构建一个对象树。QML对
Ja vaScript与Qt现有的QObjec -tbase类型系统进行整合改善；增加了自动属性绑定的支持并提供在
语言级别的网络透明度。
QML元素是一套先进的图形，就像搭积木方式那样构建界面。这些不同的元素是通过QML文档来
绑在一起的，从简单的按钮与滑块到复杂完整的应用程序，例如一个受欢迎的Flickr照片共享网站上的
照片浏览器。
Qt Quick是建立在Qt固有优势的基础上。QML可被用于逐步扩展现有的程序或创建全新的应用
程序。QML通过QtDeclarative模块来完全扩展C++功能。
入门
QML语言入门
QML是一个说明性语言，用来描述程序的用户界面：它的外观以及它的行为。在QML中，一个用
户界面作为一个带有属性的对象树。
本篇是为有很少或没有编程经验的人准备的。Ja vaScript是用来作为QML的脚本语言，所以你可
能想对它了解多一点（Ja vaScript：The Definitive Guide），然后再深入QML。另外如HTML与
CSS等Web技术的基础原理也是有帮助的；但它不是必需的。
QML语言基础
QML类似这样：
import Qt 4.7
Rectangle {
1
width: 200
height: 200
color: “blue”
Image {
source: “pics/logo.png”
anchors.centerIn: parent
}
}
对象是指定的类型，紧随其后是一对大括号，对象类型总是首字母为大写。在上面的示例中，有两个
对象，一个Rectangle［矩形］与一个Image［图像］。在大括号之间是关于该对象特定的信息，例如
它们的属性。
属性是以property［属性］: value［值］形式指定的。在上面的示例中，我们可以看到图像有个名为
source［来源］的属性，它的值被指定为”pics/logo.png”。该属性与它的值是由冒号来分隔。
属性是由单行来输写：
Rectangle {
width: 100
height: 100
}
或单行输写多个属性：
Rectangle { width: 100; height: 100 }
当单行输写多属性/值时，必须由分号来分隔开来。
Import语句导入Qt模块，它包含所有标准的QML元素。如果没有Import语句；那么Rectangle与
Image元素将无效。
表达式
除了赋值属性外；你也可以用JavaScript编写的表达式来指定。
Rotation {
angle: 360 * 3
}
这些表达式可以包含其它的对象与属性的引用，在这种情况下就会建立约束关联：当该表达式改变值
2
时；该属性值将自动更新。
Item {
Text {
id: text1
text: “Hello World”
}
Text {
id: text2
text: text1.text
}
}
在上面的示例中，text2对象将显示与text1相同的文本。如果text1改变值；那么text2也将自
动更新为相同的值。
注意这里我们通过使用id值引用其它的对象。（详情请参见id属性信息）
QML注释
在QML中的注释类似于JavaScript。
单选注释以// 开始。
多行注释以/* 开始，以 */ 结束。
import Qt 4.7
注释是不被执行的，添加注释可对代码进行解释或者提高其可读性。
注释同样还可用于防止代码执行，这对跟踪问题是非常有用的。
Text {
text: “Hello world!”
//opacity: 0.5
}
在上面的示例中，这个Text对象将正常显示，一旦opacity: 0.5这行关掉注释，这是以半透明方式
显示文本。
属性
属性命名
属性命名以首字母为小字（附加属性除外）。
3
属性类型
QML支持许多类型的属性（参阅QML基本类型）。基本类型包括整型、实数型、布尔、字符串、颜
色以及列表。
Item {
x: 10.5 // a ‘real’ property
…
state: “details” // a ‘string’ property
focus: true // a ‘bool’ property
}
QML属性是有类型安全检测的。也就是说，它们只允许你指定一个与属性类型相匹配的值。例如，
项目x属性类型是实数，如果你赋值一个字符串；那么将会得到错误的信息。
Item {
x: “hello” // illegal!
}
id属性
每个对象可给予一个特定唯一的属性称之为id。在同一个QML文件中不可能拥有与其它对象同名的id
值。指定一个id可以允许该对象可以被其它的对象与脚本引用。
下面的示例中，第一个矩形元素的id名为”myRect”。第二个矩形元素的宽度是引用的
myRect.widtch，这意味着它将与第一矩形具有相同的width值。
Item {
Rectangle {
id: myRect
width: 100
height: 100
}
Rectangle {
width: myRect.width
height: 200
}
}
请注意，一个id首字符必须是小写字母或下划线并且不能包含字母，数字和下划线以外的字符。
4
列表属性
列表属性类似于下面这样：
Item {
children: [
Image {},
Text {}
}
列表是包含在方括号内，以逗号分隔的列表元素。在你只分配单一项目列表的情况下，是可以省略方
括号：
Image {
children: Rectangle {}
}
默认属性
每个对象类型可以指定列表或对象属性之一作为其默认属性。如果一属性已被声明为默认属性，该属
性标记可以被省略。例如该代码：
State {
changes: [
PropertyChanges {},
PropertyChanges {}
}
可以简化成这样：
State {
PropertyChanges {},
PropertyChanges {}
}
因为changes是State类型的默认属性。
分组属性
在某些情况下使用一个’.'符号或分组符号形成一个逻辑组。
分组属性可写以下这样：
5
Text {
font.pixelSize: 12
font.bold: true
}
或者这样：
Text {
font { pixelSize: 12; bold: true }
}
在元素文件分组属性使用’.'符号显示。
附加属性
有些对象的属性附加到另一个对象。附加属性的形式为Type.property其中Type是附加property
元素的类型。
例如：
Component {
id: myDelegate
Text {
text: “Hello”
color: ListView.isCurrentItem ? “red” : “blue”
}
}
ListView {
delegate: myDelegate
}
ListView元素附加ListView.isCurrentItem属性到每个它创建的代理上。
另一个附加属性的例子就是Keys元素，它用于处理任意可视项目上的按键，例如：
Item {
focus: true
Keys.onSelectPressed: console.log(“Selected”)
}
信号处理器
信号处理器允许响应事件时处理动作。例如，MouseArea元素有信号处理器来处理鼠标按下，释放
6
以及单击：
MouseArea {
onPressed: console.log(“mouse button pressed”)
}
所有信号处理器开始都是启用的。
有一些信号处理器包含一个可选的参数，例如MouseArea onPressed信号处理程序有鼠标参数：
MouseArea {
acceptedButtons: Qt.LeftButton | Qt.RightButton
onPressed: if (mouse.button == Qt.RightButton) console.log(“Right mouse button pressed”)
}
QML教程
这节内容是通过QML入门教程来熟悉Qt Quick语言。当然它不会面面俱到；只是重点让大家熟悉主
要语法与特性。
通过这节几个不同的步骤我们学习QML基本类型，使用属性与信号来建立我们自己的QML组件；而
且还要使用状态与变换的帮助来建立一个简单的动画。
这节从迷你的“Hello World”程序出发，在随后的章节中将引入新的概念。
这个教程的源代码位于$QTDIR/examples/declarative/tutorials/helloworld文件夹下。
教程1——基本类型
这是一个非常简单的”Hello World”程序，它将介绍一些基本的QML概念。下图是该程序运行的结
果。
7
这是该程序的源代码：
import Qt 4.7
Rectangle {
id: page
width: 500; height: 200
color: “lightgray”
Text {
id: helloText
text: “Hello world!”
y: 30
anchors.horizontalCenter: page.horizontalCenter
font.pointSize: 24; font.bold: true
}
}
逐步讲解
导入
首先，我们必须导入我们这个范例需要的类型。大多数QML文件都将导入内置的QML类型（类似于
Rectangle,Image……）这都包含在Qt内，使用：
import Qt 4.7
Rectangle元素
Rectangle {
id: page
width: 500; height: 200
color: “lightgray”
我们声明类型Rectangle为根元素。你可以使用它在应用程序中创建一个基本块。我们这里给予它
一个id作为标签以便稍后引用。在这种情况里，我们命名它为“page”。同样也设置width,height与
color属性。Rectangle元素还包含许多其它的属性（例如x与y)；但这些我们保留它们默认的值。
Text元素
Text {
id: helloText