Qt Quick Lession2 (QML語法從一個簡單的例子說起)
在上一篇文章中，我們對QtQuick做了簡單的介紹，體驗了使用QML語言構建一個UI的便捷。這裡我們簡要介紹一下QML的語法。
QML將介面分成一些更小的元素，這些元素可以組成一個元件，QML語言描述了UI的形狀和行為，並且可以使用JavaScript修飾。總的來說QML的結構有點像HTML，其語法和CSS比較近似。
1.QML層次結構
要使用QML進行介面的佈局，首先需要理解QML元素的層次結構。QML的層次結構很簡單，是一個樹形結構，最外層必須有一個根元素，根元素裡面可以巢狀一個或多個子元素，子元素裡面還可以包含子元素。如果用圖形畫出來的話大概是這個樣子。
QML的座標系採用的螢幕座標系，原點在螢幕左上角，x軸從左向右增大，y軸從商到下增大，z軸從螢幕向外增大。子元素從父元素上繼承了座標系統，它的x,y總是相對於它的父元素座標系。這一點一定要記住，非常重要。
2.基本語法
我們主要對照下面的程式碼進行介紹：
1 import QtQuick 2.4
2 import QtQuick.Window 2.2
3 import QtQuick.Controls 1.2
4
5 /* 這是一個多行註釋，和c語言的一樣 */
6 // 當然這是一個單行註釋
7
8 Window {
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指令碼的方式。