从头学QtQuick（2）--QML语法从一个简单的例子说起

从头学QtQuick（2）--QML语法从⼀个简单的例⼦说起
在中，我们对QtQuick做了简单的介绍，体验了使⽤QML语⾔构建⼀个UI的便捷。

这⾥我们简要介绍⼀下QML的语法。

QML将界⾯分成⼀些更⼩的元素，这些元素可以组成⼀个组件，QML语⾔描述了UI的形状和⾏为，并且可以使⽤JavaScript修饰。

总的来说QML的结构有点像HTML，其语法和CSS⽐较近似。

1.QML层次结构
要使⽤QML进⾏界⾯的布局，⾸先需要理解QML元素的层次结构。

QML的层次结构很简单，是⼀个树形结构，最外层必须有⼀个根元素，根元素⾥⾯可以嵌套⼀个或多个⼦元素，⼦元素⾥⾯还可以包含⼦元素。

如果⽤图形画出来的话⼤概是这个样⼦。

QML的坐标系采⽤的屏幕坐标系，原点在屏幕左上⾓，x轴从左向右增⼤，y轴从商到下增⼤，z轴从屏幕向外增⼤。

⼦元素从⽗元素上继承了坐标系统，它的x,y总是相对于它的⽗元素坐标系。

这⼀点⼀定要记住，⾮常重要。

2.基本语法
我们主要对照下⾯的代码进⾏介绍：
1import QtQuick 2.4
2import QtQuick.Window 2.2
3import QtQuick.Controls 1.2
4
5/* 这是⼀个多⾏注释，和c语⾔的⼀样 */
6// 当然这是⼀个单⾏注释
7
8Window {
9
10 id:root; // Window元素的id，应该保证在这个qml⽂件中名字唯⼀
11 visible: true;
12 width: 460; // 直接指定窗⼝的宽度
13 height: 288; // 直接指定窗⼝的⾼度
14
15 Image {
16 id: bg;
17 width: parent.width; // 图⽚的宽度依赖⽗窗⼝的宽度
18 height: parent.height; // 图⽚的⾼度依赖⽗窗⼝的⾼度
19 source: "qrc:///images/sky.jpg" // 引⽤⼀张图⽚
20 }
21
22 Image {
23 id: rocket;
24 x: (parent.width - width) / 2; // 图⽚位置⽔平居中
25 y: 40; // 图⽚位置距离⽗窗⼝40
26 source: "qrc:///images/rocket.png";
27 }
28
29 Text {
30 // 没有指定id，即这是⼀个匿名元素
31 y:rocket.y + rocket.height + 20; // ⽂本顶部距离rocket图⽚底部20
32 anchors.horizontalCenter: parent.horizontalCenter // 设置⽂字⽔平居中
33 text: qsTr("⽕箭发射！"); // 设置⽂本显⽰的⽂字
34 color: "#ff2332"; // 设置⽂本颜⾊
35 font.family: "楷体"; // 设置字体为楷体
36 font.pixelSize: 30; // 设置⽂字⼤⼩
37 }
38}
运⾏效果是这个样⼦。

布局结构是是这样的：
代码说明：
（1）第1~3⾏的import是引⼊了⼀个指定版本的模块。

⼀般都会引⼊QtQuick2.x这个模块，Window模块代表⼀个窗体，Control模块有很多的控制组件。

这种import语法类似于C语⾔中的#include，和Java语⾔中的imort效果基本上⼀致。

（2）第5、6两⾏分别是多⾏注释和单⾏注释，和C语⾔中的规则是⼀样的。

（3）每⼀个QML⽂件都需要⼀个根元素，这⾥的根元素是Window元素，元素的形式是：元素类型 {}
（4）元素拥有属性，他们按照name:value的格式进⾏组织；
（5）语句后⾯的分号";"是可选的，但是建议加上；
（6）第7⾏指定了window的id，在⼀个qml⽂件这种id硬保证唯⼀，否则后出现的id会覆盖前⾯的id造成不必要的bug。

建议根元素的名字直接叫“root”，⽅便查找和理解，当然也可以取名任何你喜欢的名字。

任何QML⽂档中的元素都可以使⽤他们的id进⾏访问；
（7）第11⾏设置窗⼝可见，默认是false;
（8）第12、13⾏指定了窗⼝的宽⾼为460x288;
（9）第15⾏使⽤了⼀个Image元素，这个元素是⽤来展⽰图⽚的；
（10）第17、18⾏指定图⽚的⾼度和宽度为⽗元素（即WIndow）的宽⾼，因此图⽚的宽⾼会随着⽗元素变化，使⽤parent可以访问⽗元素。

（11）19⾏指定了⼀个图⽚资源的路径，这⾥使⽤了“qrc://”资源，这个资源的路径在进⾏配置；qml还⽀持直接的本地⽂件路径和⽹络路径。

（12）第24、25⾏指定了第⼆张图⽚的位置，在窗⼝⽔平居中，距离窗⼝顶部40像素；
（13）第29⾏创建了⼀个Text元素，这个元素是⽤来呈现⽂字的。

（14）第31⾏指定⽂本元素的y坐标为距离⽕箭图⽚（rock）底部20个像素；
（15）第32⾏使⽤锚点的⽅式设置了⽂字的⽔平居中；
（16）第33⾏设置了⽂本内容；
（17）第34⾏设置⽂字的颜⾊，⽂字的颜⾊可以使⽤RGB⽅式也可以使⽤W3C规范的SVG⽅式；
（18）第35、36⾏设置了字体和⽂字的⼤⼩。

3.qmlscene ⼯具
qt提供了⼀个查看qml效果的⼯具qmlscene ，这个⼯具在$QTDIR/qmlscene.exe，设置好环境变量后就可以直接在cmd矿⼝⾥⾯使⽤qmlscene 查看qml⽂件效果。

在控制台下输⼊qmlscene后就会弹出⼀个⽂件选择窗⼝，选择需要预览的qml，当然这⾥我们图⽚设置的是qrc路径，qmlscene预览效果并不好
可以看到，两张图⽚并没有显⽰出来，并且会提⽰找不到这两张图⽚。

解决办法当然可以将qrc路径修改成本地⽂件路径
当然qmlscene也可以直接在后⾯接qml的位置⽐如上⾯图中就使⽤了
qmlscene D:/Workspace/qt/rocket/main.qml
在下⼀篇随笔中将详细介绍QML语法中的属性，和在QML使⽤JS脚本的⽅式。

代码下载：。