分类： 嵌入式
2014-08-26 14:45:50
QML 是一个说明性语言，用来描述程序的用户界面：它的外观以及它的行为。在 QML 中，一个用户界面作为一个带有属性的对象树。
QML 语言基础
QML 类似这样：
import Qt 4.7
Rectangle {
width: 200
height: 200
color: "blue"
Image {
source: "pics/logo.png"
anchors.centerIn: parent
}
}
对象是指定的类型，紧随其后是一对大括号，对象类型总是首字母为大写。在上面的示例中，有两个对象，一个 Re ctangle［矩形］与一个 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
}
这些表达式可以包含其它的对象与属性的引用，在这种情况下就会建立约束关联：当该表达式改变值时；该属性值将自动更新。
Item {
Text {
id: text1
text: "Hello World"
}
Text {
id: text2
text: text1.text
}
}
在上面的示例中，text2 对象将显示与 text1 相同的文本。如果 text1 改变值；那么 text2 也将自动更新为相同的值。
注意这里我们通过使用 id 值引用其它的对象。
QML 注释
在 QML 中的注释类似于 JavaScript。
单选注释以 // 开始。
多行注释以 /* 开始，以 */ 结束。
属性
属性命名
属性命名以首字母为小字
属性类型
QML 支持许多类型的属性（参阅 QML 基本类型）。基本类型包括整型、实数型、布尔、字符串、颜色以及列表。
Item {
x: 10.5 // a 'real' property
...
state: "details" // a 'string' property
focus: true // a 'bool' property
}
QML 属性是有类型安全检测的。也就是说，它们只允许你指定一个与属性类型相匹配的值。例如，项目 x 属性类型是实数，如果你赋值一个字符串；那么将会得到错误的信息。
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 首字符必须是小写字母或下划线并且不能包含字母，数字和下划线以外的字符。
列表属性
列表属性类似于下面这样：
Item {
children: [
Image {},
Text {}
]
}
列表是包含在方括号内，以逗号分隔的列表元素。在你只分配单一项目列表的情况下，是可以省略方括号：
Image {
children: Rectangle {}
}
默认属性
每个对象类型可以指定列表或对象属性之一作为其默认属性。如果一属性已被声明为默认属性，该属性标记可以被省略。例如该代码：
可以简化成这样：
State {
PropertyChanges {},
PropertyChanges {}
}
因为 changes 是 State 类型的默认属性。
分组属性
在某些情况下使用一个'.'符号或分组符号形成一个逻辑组。
分组属性可写以下这样：
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 元素有信号处理器来处理鼠标按下，释放以及单击：
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")
}
