import QtQuick 2.2
Rectangle {
width: 400
height: 200
color: "blue"
Image {
source: "image/log.png"
anchors.centerIn: parent
}
}
- 导入语句(import)
类似于python中的导入方式,如上。
- 对象(object)和属性(property)
QML文档就是一个对象树。上面这段代码中,创建了两个对象:Rectangle对象和他的子对象Image。QML对象由他们的类型(type)指定,以大写字母开头,后面跟随一对大括号。
打括号中包含了对象的特性定义,比如这个对象的属性值或其子对象;属性通过 “属性:值”的语法进行初始化,不同属性可以向上面一样放在多行,也可以放在一行,如下:
Rectangle { width: 400; height:400 }
- 布局
如上Image的anchors.centerIn起到了布局的作用。它会使Image处于一个对象的中间位置。除了anchors,QML还提供了很多其他布局方式。
- 注释
QML的注释和C/C++的注释相似:
- 单行注释使用“//”开始,直到行末结束
- 多行注释使用“/*”开始,以“*/”结尾
- 表达式
JavaScript表达式可以用于设置属性的值,表达式可以是常量表达式也可以是包含其他对象或属性的表达式
Iterm {
width: 500 + 100
height: 200 * 2
Rectangle {
width: parent.width - 200
height: width * 0.6
color: "yellow"
anchors.centerIn: parent
}
}
上面Iterm的width是常量表达式,而它的子对象rectangle的width则绑定了他的width属性,当Iterm的width发生改变时,Rectangle的width也会动态随之改变。
- 调试输出
在QML代码中使用可以和console.log()和console.debug()来输出调试信息,它类似于进行Qt C++编程时使用的qDebug()。
Rectangle {
width: 70
height: 30
color: "green"
MouseArea {
anchors.fill: parent
onClicked: console.log("矩形的颜色:", color)
}
}