作者:丁冬,华清远见嵌入式学院讲师。
QML 是一种声明方式设计的语言,用来设计应用程序的界面,包括样式与表现行为。在QML 中,用户界面被制定为一个树形的对象模型并且包含了对象的属性。在学习QML最好首先有HTML 的基础与CSS 的基础。
基本的QML语法
Rectangel
{
width:200
height:200
color:"white"
Image{
source: "pics/logo,png"
anchors.conterIn.parent
}
首先声明对象的名称,通过大括号将属性包含进来,在上面的代码当中包含了两个属性,一个是对于正方体属性的设置,另外是对图像属性的设置。对于一个属性的定义方式有两种方法,可以将属性写成两行,也可以写成一行下面是两种书写的方法,作为比较。
第一种方法:
Rectangle {
width: 100
height: 100
}
第二种方法:
Rectangle { width: 100; height: 100 }
当对于多个对象与属性进行声明的时候而且写成一行,需要注意在他们中间加上分号。
可扩展方式
有一些语法的生命可以写成javaScript 的方式。
Rotation {
angle: 360 * 3
}
针对不同的项目也可以使用相同的对象属性名称来设计,下面是例子:
Item {
Text {
id: text1
text: "Hello World"
}
Text {
id: text2
text: text1.text
}
}
上面的两行代码是通过不同的id 来区分不同的对象设置。
QML 的内容页面
内容页面与javaScript 是十分相似的,包括注释方式,下面是实例代码
import Qt 4.6
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
}