在上一篇文章中，我們對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腳本的方式。