初识QML学习机制

在QML中，一个用户界面被指定为具有属性的对象树，这使得Qt更加便于很少或没有编程经验的人使用，JavaScript在QML中作为一种脚本语言，对QML进行逻辑方面的编程。

AD：WOT2015 互联网运维与开发者大会 热销抢票

QML是Qt推出的Qt Quick技术的一部分，是一种新增的简便易学的语言。QML是一种陈述性语言，用来描述一个程序的用户界面：无论是什么样子，以及它如何表现。在QML，一个用户界面被指定为具有属性的对象树。 这使得Qt更加便于很少或没有编程经验的人使用。 JavaScript在QML中作为一种脚本语言，对QML进行逻辑方面的编程.。

使用了最基础的QML类型实现了文字Hello,World的显示。这篇文章中将会增加颜色选项面板，用户可以给Hello,World设置不同的颜色，如下图显示：

QML组件

从图中可以看到选项面板由6个颜色小块组成，它们唯一的区别就是颜色不一样。那么我们就可以用组件(Component)来实现一个颜色块，然后在需要的时候使用这个组件就可以了。组件其实和其它编程语言中的宏，函数，类，结构体等功能差不多，就是代码复用。作为程序员，我知道你懂的。

组件由一个单独的QML文件名组成，文件名总是以大写字母开头，要使用该组件的时候直接使用该文件名就可以了。关于如何定义自己的组件，请访问Defining new Components。我们为一个颜色块定义了一个Cell.qml文件，然后使用Cell作为一个去访问它。

Cell.qml的内容：

1. import Qt 4.7Item {
2. id: container
3. property alias cellColor: rectangle.color
4. signal clicked(color cellColor)
5. width: 40; height: 25
6. Rectangle {
7. id: rectangle
8. border.color: "white"
9. anchors.fill: parent
10. } MouseArea {
11. anchors.fill: parent
12. onClicked: container.clicked(container.cellColor)
13. }
14. }

1. Item {id: container
2. property alias cellColor: rectangle.color
3. signal clicked(color cellColor)
4. width: 40; height: 25

Item是最常使用的QML类型，一般用作其它类型的容器，可以理解成最顶级的父类，功能类似于QtGui中的QWidget。用一个属性别名访问其内嵌对象rectangle的color属性。在其它文件中可以用Cell对象的cellColor获得rectangle的color值。

signal clicked(color cellColor)则为对象定义了一个信号，在代码的其它部分可以发出这个信号。

1. Rectangle {id: rectangle
2. border.color: “white”
3. anchors.fill: parent}

这一部分没有特别好说的，在Item中内嵌了一个id为rectangle白边框的矩形区域，大小占满整个Item。

1. MouseArea {
2. anchors.fill: parent
3. onClicked: container.clicked(container.cellColor)}

MouseArea则为Item增加了一块鼠标响应区，看它的anchors知道，在整个Item区域内都是鼠标活动区，都能侦听到鼠标事件。onClicked那一行则相当于为鼠标单击事件增加了一个处理行为，这里是发出了一个clicked()的信号。这个信号正是我们在Item里定义的那个signal。

Cell.qml写完了，再来看看程序的主文件。

main.qml的内容：

1. import Qt 4.7Rectangle {
2. id: page     width: 500; height: 200     color: "lightgray"     Text {
3. id: helloText
4. text: "Hello world!"
5. y: 30
6. anchors.horizontalCenter: page.horizontalCenter
7. font.pointSize: 24;
8. font.bold: true
9. }
10. Grid {
11. id: colorPicker  x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
12. rows: 2; columns: 3; spacing: 3
13. Cell {
14. cellColor: "red";
15. onClicked: helloText.color = cellColor
16. }
17. Cell {
18. cellColor: "green";
19. onClicked: helloText.color = cellColor
20. }
21. Cell {
22. cellColor: "blue";
23. onClicked: helloText.color = cellColor
24. }
25. Cell {
26. cellColor: "yellow"; onClicked: helloText.color = cellColor
27. }
28. Cell {
29. cellColor: "steelblue";
30. onClicked: helloText.color = cellColor
31. }
32. Cell {
33. cellColor: "black";
34. onClicked: helloText.color = cellColor }
35. }
36. }

这里在原来的基础上增加了一个Grid网格。x坐标是4，底部挨着page的底部，所以我们看到的是在左下角。

新增的6个Cell，名字和Cell.qml是一样的。通过cellColor属性将颜色传给了每个颜色块。

当Cell接收到onClicked事件的时候,关联的代码回去修改Hello,World上的颜色。细心的朋友可能会注意到Cell只是定义了clicked()的信号，并没有定义onClicked()啊，是的这就是Component的语法规则了。如果你在Cell.qml里定义的是plicked(),那么你在main.qml中引用的时候就该用onPlicked()了。

小结：QML是Qt推出的Qt Quick技术的一部分，是一种新增的简便易学的语言。本文的代码也不少了，随便改动改动，你会了解更多QML的秘密的本文借到这！嘿嘿，如有疑问，敬请留言。