QML是一种声明式语言,设计用来描述程序中的用户接口:就是看起来像什么,它的行为是什么。在QML中,一个用户接口被定义为对象的属性树。
这种对不管有没有编程经验的人都适合,javascript是QML中的脚本语言,所以你必须学一点关于它的知识。在你深入QML之前,学习一点html和css的基础是很有用的,但不是必须的。
QML语法基础:
qml看起来是像这样的:
import QtQuick 1.0
Rectangle {
width: 200
height: 200
color: "blue"
Image {
source: "pics/logo.png"
anchors.centerIn: parent
}
}
对象都用他们的类型定义,用一对大括号包住。对象类型以大写开始,在上面的例子中,有两个对象,Rectangle和Image,在这两个括号里面,我们能定义object的信息,例如他们的属性。
属性以property:value的形式定义。在上面的例子中,我们能看到Image拥有一个叫source的属性,它被赋值为"pics/logo.png".这个属性和它的值被:分开。
属性值可以每行定义一个
Rectangle {
width: 100
height: 100
}
或者定义在同一行
Rectangle { width: 100; height: 100 }
当多个property/value属性定义在同一行,他们必须用;分开
import语句导入qt模块,它包含了所有标准的QML元素。如果不导入,则Rectangle和Image元素不可达。
表达式
为了将值赋值给property,你可以使用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相似
1.单行注释以//开始
2.多行注释以/*开始,以*/结束
注释被解释引擎所忽略,它对解释代码很有用处。注释在追踪问题的时候注释代码也很有用处:
Text {
text: "Hello world!"
//opacity: 0.5
}
在上面的例子中,这个文本对象在注释掉opacity:0.5之后,将会是正常不透明的。
属性
属性命名:属性都是以小写字母开始。
属性类型
QML支持许多属性类型,基本的类型包括int,real,bool,string,color和lists.
Item {
x: 10.5 // a 'real' property
...
state: "details" // a 'string' property
focus: true // a 'bool' property
}
QML属性都是类型安全的,赋予的值必须符合属性类型,例如:item中的x属性是real,如果你赋予一个string类型将会报错。
Item {
x: "hello" // illegal!
}
id属性
任何一个对象都会用id来独立标识。在同一个QML文件里没有任何两个对象拥有同一个id标识。另外的对象和脚本可以使用id来访问该对象。下面第一个Rectangle拥有一个id "myRect",第二个定义自己的宽度使用myRect.width,这意味这两个Rectangle拥有同一个宽度值。
Item {
Rectangle {
id: myRect
width: 100
height: 100
}
Rectangle {
width: myRect.width
height: 200
}
}
id必须以小写字母或者下划线开始,不能是其他字符,字母。
list属性:
Item {
children: [
Image {},
Text {}
]
}
这个list以中括号括起来,以逗号将元素分开。假如list中只有一个元素,可以省略这个方括号。
Image {
children: Rectangle {}
}
默认属性
任何对象类型都可以定义它的list和对象属性来代替默认的属性,如果一个属性以默认的属性来声明,属性标签将会被忽略。
例如:
State {
changes: [
PropertyChanges {},
PropertyChanges {}
]
}
能够简化为:
State {
PropertyChanges {}
PropertyChanges {}
}
因为changes是state的默认属性
组属性:
从一个逻辑组使用.或者组标签来展示.组属性像下面来写:
Text {
font.pixelSize: 12
font.bold: true
}
或者像这样
Text {
font { pixelSize: 12; bold: true }
}
在组属性的元素文档中都是使用.来标识
附加属性
一些对象附加属性给另外一些对象。附加的属性都是从Type.property获取,Type就是附加在属性上的类型
例如:
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元素拥有一个signal处理来处理鼠标的按下和释放
MouseArea {
onPressed: console.log("mouse button pressed")
}
信号处理属性都是由“on”开始,一些信号处理包括可选择的参数,例如MouseArea的onPressed就有一个mouse参数
MouseArea {
acceptedButtons: Qt.LeftButton | Qt.RightButton
onPressed: if (mouse.button == Qt.RightButton) console.log("Right mouse button pressed")
}