QML是一种声明式的语言,用来描述程序的用户界面:两个方面--外观和行为.在QML中用户界面被描述为带有属性的对象的树.
QML中使用JavaScript作为脚本语言,因此深入学习QML前应先多了解一下Javascript.
QML基本语法
QML是这个样子的:
import QtQuick 1.0
Rectangle {
width: 200
height: 200
color: "blue"
Image {
source: "pics/logo.png"
anchors.centerIn: parent
}
}
声明对象时,先指定其类型,后面是一对大括号.对象类型名称的首字母总是大写的.上例中,有两个对象,一个Rectangle,一个Image.在大括号中间可以设置对象的信息,如属性.
设置属性使用 propertyname: value的方式.上例中,设置了Image对象的source属性值为 "pics/logo.png".属性和值中间用冒号间隔.
属性可在一行设置:
Rectangle {
width: 100
height: 100
}
或在一行中设置多个属性:
Rectangle { width: 100; height: 100 }
当在一行中设置多个属性,需要使用分号间隔.
import语句导入Qt模块,其中包含了所有标准的QML元素.没有导入语句,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属性指定的对象名称来引用其他对象 (更多id属性信息见下面的描述.)
QML注释
QML中的注释与JavaScript相同.
- 单行注释使用//.
- 多行注释使用 /* */
Text {
text: "Hello world!" //a basic greeting
/*
We want this text to stand out from the rest so
we give it a large size and different font.
*/
font.family: "Helvetica"
font.pointSize: 24
}
注释被引擎忽略.用于解释做了什么,便于日后查阅,也有助于其他人阅读QML文件.
注释也可防止代码执行,便于跟踪问题.
Text {
text: "Hello world!"
//opacity: 0.5
}
上例中,Text对象具有正常的透明度,因为opacity: 0.5被注释掉了.