從頭學Qt Quick（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.基本語法

咱們主要對照下面的代碼進行介紹：

 

 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）第五、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）第十二、13行指定了窗口的寬高爲460x288;

（9）第15行使用了一個Image元素，這個元素是用來展現圖片的；

（10）第1七、18行指定圖片的高度和寬度爲父元素（即WIndow）的寬高，所以圖片的寬高會隨着父元素變化，使用parent能夠訪問父元素。

（11）19行指定了一個圖片資源的路徑，這裏使用了「qrc://」資源，這個資源的路徑在進行配置；qml還支持直接的本地文件路徑和網絡路徑。

（12）第2四、25行指定了第二張圖片的位置，在窗口水平居中，距離窗口頂部40像素；

（13）第29行建立了一個Text元素，這個元素是用來呈現文字的。

（14）第31行指定文本元素的y座標爲距離火箭圖片（rock）底部20個像素；

（15）第32行使用錨點的方式設置了文字的水平居中；

（16）第33行設置了文本內容；

（17）第34行設置文字的顏色，文字的顏色可使用RGB方式也可使用W3C規範的SVG方式；

（18）第3五、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腳本的方式。

代碼下載：http://download.csdn.net/detail/csulennon/8673425