本文介紹QML入門教程的文章，教你如何學習QML。在QML，一個用戶界面被指定為具有屬性的對象樹。 這使得Qt更加便于很少或沒有編程經驗的人使用。

Qt Declarative UI 傳得沸沸揚揚，卻很少有中文資料介紹這是一個什么樣的技術，以及如何使用它。偶爾能搜到幾篇也是掐頭去尾的，讓人摸不著頭腦。CuteQt網友英狐奉獻的三篇文章很有參考價值，把我帶入了門。我準備翻譯的這個入門教程來自于Qt官方文檔，更多的是語法性的介紹。說是翻譯，其實是我在原文基礎上的一個閱讀理解吧。

QML是什么？

QML是一種描訴性的腳本語言，文件格式以.qml結尾。語法格式非常像CSS(參考后文具體例子)，但又支持javacript形式的編程控制。我個人認為它結合了QtDesigner UI和QtScript的有點。QtDesigner可以設計出.ui界面文件,但是不支持和Qt原生C++代碼的交互。QtScript可以和Qt原生代碼進行交互，但是有一個缺點，如果要在腳本中創建一個繼承于QObject的圖形對象非常不方便，只能在Qt代碼中創建圖形對象，然后從QtScript中進行訪問。而QML可以在腳本里創建圖形對象，并且支持各種圖形特效，以及狀態機等，同時又能跟Qt寫的C++代碼進行方便的交互，使用起來非常方便。

如何使用？

在Qt C＋＋文件中通過QDeclarativeView加載，就像使用UiLoader加載.ui文件一樣。不過本文不會去介紹如何在Qt C＋＋中使用QML，而是把重點放在QML的語法上，不過別擔心看不到.qml文件的效果。Qt提供了一個工具QML Viewer可以查看.qml文件生成的效果，該程序在Qt的bin目錄下，應用名字叫qml(Windows下叫qml.exe)。所以你在看到別人提供的.qml文件時，你可以用下面命令qml filename.qml 查看.qml的執行結果，咱們的***個Hello,World生成界面如下：

開始QML吧

上面的Hello,World源代碼如下

import Qt 4.7  
 Rectangle {  
     id: page  
    width: 500; height: 200  
    color: “lightgray”  
     Text {  
        id: helloText  
        text: “Hello world!”  
         font.pointSize: 24; font.bold: true  
        y: 30; anchors.horizontalCenter: page.horizontalCenter  
     }  
 } 

第1行是Qt QML的統一用法，指明當前QML會使用Qt-4.7里已經定義好的類型，比如第3行的Rectangle和第8行的Text。

第3行開始至文章結束處則定義了一個矩形的圖形區域對象，第4行則申明了該矩形區域對象的id為”page”可以被其它對象識別并通過該id訪問其成員屬性，另外幾個屬性width/height/color則很好理解，語法跟CSS類似，可以寫在一行中用分號”;”隔開。

第8行至第12行則是一個文本對象，看它代碼的嵌套結構可以知道它是內嵌于Rectangle的。Text的屬性除了anchors其它幾個都能顧名思義。anchors描訴的是當前對象的位置和其它對象的相對關系，這里看到其水平中心位置在“page“的水平中心位置。如果相對anchors了解更多，請參考錨的解釋。

以上就是Hello,World的全部代碼，將其存為hellowordl.qml，那么只要執行 qml hellowrold.qml就能看到文章前頭的界面了。

更多對象？

在上面的代碼中我們用到了Rectangle和Text，那么我還有哪些對象以及這些對象有哪些屬性呢。那么請訪問QML-Item類,Item類是QML最基礎的類，通過查看它的繼承類以及這些繼承類可用的屬性，你可以添加更多你感興趣的內容。