QML 杂记 Tonkv翻译
Qt Quick
简介
Qt Quick提供了一套高动态,丰富的QML元素来定制用户界面的说明性框架。Qt Quick有助于
程序开发员与界面设计员的合作为便携式设备建立流畅的用户界面,例如:移动电话、媒体播放器,机
顶盒以及上网本等。Qt Quick包含了QtDeclarative C++模块,QML并且它们全被整合到Qt
Create IDE中。使用QtDeclarative C++模块可以从你的QT 应用程序中载入QML文件并与之互动。
QML是对Ja vaScript一种扩展,它提供一种机制使用QML元素来说明构建一个对象树。QML
Ja vaScriptQt现有的QObjec -tbase类型系统进行整合改善;增加了自动属性绑定的支持并提供在
语言级别的网络透明度。
QML元素是一套先进的图形,就像搭积木方式那样构建界面。这些不同的元素是通过QML文档来
绑在一起的,从简单的按钮与滑块到复杂完整的应用程序,例如一个受欢迎的Flickr照片共享网站上的
照片浏览器。
Qt Quick是建立在Qt固有优势的基础上。QML可被用于逐步扩展现有的程序或创建全新的应用
程序。QML通过QtDeclarative 模块来完全扩展C++功能。
入门
QML语言入门
QML是一个说明性语言,用来描述程序的用户界面:它的外观以及它的行为。在QML中,一个用
户界面作为一个带有属性的对象树。
本篇是为有很少或没有编程经验的人准备的。Ja vaScript是用来作为QML的脚本语言,所以你可
能想对它了解多一点(Ja vaScriptThe Definitive Guide),然后再深入QML。另外如HTML
CSSWeb 技术的基础原理也是有帮助的;但它不是必需的。
QML语言基础
QML类似这样:
import Qt 4.7
Rectangle {
语言岛网站 www.langisle 1
QML 杂记 Tonkv翻译
width: 200
height: 200
color: "blue"
Image {
source: "pics/logo.png"
In: 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
}
这些表达式可以包含其它的对象与属性的引用,在这种情况下就会建立约束关联:当该表达式改变值
语言岛网站 www.langisle 2
QML 杂记 Tonkv翻译
时;该属性值将自动更新。
Item {
Text {
id: text1
text: "Hello World"
}
Text {
id: text2
text:
}
}
在上面的示例中,text2对象将显示与text1相同的文本。如果text1改变值;那么text2也将自
动更新为相同的值。
注意这里我们通过使用id值引用其它的对象。(详情请参见id属性信息)
qt listview
QML注释
QML中的注释类似于JavaScript
单选注释以 // 开始。
多行注释以 /* 开始,以 */ 结束。
import Qt 4.7
注释是不被执行的,添加注释可对代码进行解释或者提高其可读性。
注释同样还可用于防止代码执行,这对跟踪问题是非常有用的。
Text {
text: "Hello world!"
//opacity: 0.5
}
在上面的示例中,这个Text对象将正常显示,一旦opacity: 0.5这行关掉注释,这是以半透明方式
显示文本。
属性
属性命名
属性命名以首字母为小字(附加属性除外)。
语言岛网站 www.langisle 3
QML 杂记 Tonkv翻译
属性类型
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首字符必须是小写字母或下划线并且不能包含字母,数字和下划线以外的字符。
语言岛网站 www.langisle 4
QML 杂记 Tonkv翻译
列表属性
列表属性类似于下面这样:
Item {
children: [
Image {},
Text {}
]
}
列表是包含在方括号内,以逗号分隔的列表元素。在你只分配单一项目列表的情况下,是可以省略方
括号:
Image {
children: Rectangle {}
}
默认属性
每个对象类型可以指定列表或对象属性之一作为其默认属性。如果一属性已被声明为默认属性,该属
性标记可以被省略。例如该代码:
State {
changes: [
PropertyChanges {},
PropertyChanges {}
]
}
可以简化成这样:
State {
PropertyChanges {},
PropertyChanges {}
}
因为changesState类型的默认属性。
分组属性
在某些情况下使用一个'.'符号或分组符号形成一个逻辑组。
分组属性可写以下这样:
语言岛网站 www.langisle 5
QML 杂记 Tonkv翻译
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
SelectPressed: console.log("Selected")
}
信号处理器
信号处理器允许响应事件时处理动作。例如,MouseArea元素有信号处理器来处理鼠标按下,释放
语言岛网站 www.langisle 6
QML 杂记 Tonkv翻译
以及单击:
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概念。下图是该程序运行的结

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。