#（76）：QML 和 QtQuick 2 前面我們已經了解了 Qt 的一部分內容。這部分內容全部集中在 C++ 方面。也就是說，至今為止我們的程序都是使用 C++ 語言完成的。這在 Qt 5 之前的版本中是唯一的途徑。不過，自從 Qt 5 開始，情況有了變化。事實上，從 Qt 4.7 開始，Qt 引入了一種聲明式腳本語言，稱為 QML（Qt Meta Language 或者 Qt Modeling Language），作為 C++ 語言的一種替代。而 Qt Quick 就是使用 QML 構建的一套類庫。 QML 是一種基于 JavaScript 的聲明式語言。在 Qt 5 中，QML 有了長足進步，并且同 C++ 并列成為 Qt 的首選編程語言。也就是說，使用 Qt 5，我們不僅可以使用 C++ 開發 Qt 程序，而且可以使用 QML。雖然 QML 是解釋型語言，性能要比 C++ 低一些，但是新版 QML 使用 V8，Qt 5.2 又引入了專為 QML 優化的 V4 引擎，使得其性能不再有明顯降低。在 Nokia 發布 Qt 4.7 的時候，QML 被用于開發手機應用程序，全面支持觸摸操作、流暢的動畫效果等。但是在 Qt 5 中，QML 已經不僅限于開發手機應用，也可以用戶開發傳統的桌面程序。 QML 文檔描述了一個對象樹。QML 元素包含了其構造塊、圖形元素（矩形、圖片等）和行為（例如動畫、切換等）。這些 QML 元素按照一定的嵌套關系構成復雜的組件，供用戶交互。 本章我們先來編寫一個簡單的 QML 程序，了解 QML 的基本概念。需要注意的是，這里的 Qt Quick 使用的是 Qt Quick 2 版本，與 Qt 4.x 提供的 Qt Quick 1 不兼容。 首先，使用 Qt Creator 創建一個 Qt Quick Application。在之后的 Qt Quick Component 選項中，我們選擇 Qt Quick 2.0： [](http://files.devbean.net/images/2013/12/qq-pro-setting.png) 完成創建之后，我們可以看到一個 QML 項目所需要的基本文件。這里的項目名字為 qqdemo，而且有一個自己添加的資源文件，所以這個示意圖可能與你的不同。 [](http://files.devbean.net/images/2013/12/qq-pro-files.png) qtquick2applicationviewer 里面的內容是 Qt Creator 幫助我們生成的，這里面的文件一般不會修改。我們可以認為這個文件夾下的文件就是運行 QML 的一個加載器。Application Viewer 用于加載 QML 文件并將其解釋顯示，類似于瀏覽器解釋運行網頁。 我們真正關心的是 main.qml 里面的內容： ~~~ import QtQuick 2.0 Rectangle { width: 360 height: 360 Text { text: qsTr("Hello World") anchors.centerIn: parent } MouseArea { anchors.fill: parent onClicked: { Qt.quit(); } } } ~~~ 這段代碼看起來很簡單，事實也的確如此。一個 QML 文檔分為 import 和 declaration 兩部分。前者用于引入文檔中所需要的組件（有可能是類庫，也可以是一個 JavaScript 文件或者另外的 QML 文件）；后者用于聲明本文檔中的 QML 元素。 第一行，我們使用`import`語句引入 QtQuick 2.0。由于這只是一個示例程序，所以我們沒有引入更多的內容。 每一個 QML 有且只有一個根元素，類似于 XML 文檔。這個根元素就是這個 QML 文檔中定義的 QML 元素，在這個例子中就是一個`Rectangle`對象。注意一下這個 QML 文檔的具體語法，非常類似于 JSON 的定義，使用鍵值對的形式區分元素屬性。所以我們能夠很清楚看到，我們定義了一個矩形，寬度為 360 像素，高度為 360 像素。記得我們說過，QML 文檔定義了一個對象樹，所以 QML 文檔中元素是可以嵌套的。在這個矩形中，我們又增加了一個`Text`元素，顧名思義，就是一個文本。`Text`顯示的是 Hello World 字符串，而這個字符串是由`qsTr()`函數返回的。`qsTr()`函數就是`QObject::tr()`函數的 QML 版本，用于返回可翻譯的字符串。`Text`的位置則是由錨點（anchor）定義。示例中的`Text`位置定義為 parent 中心，其中`parent`屬性就是這個元素所在的外部的元素。同理，我們可以看到`MouseArea`是充滿父元素的。`MouseArea`還有一個`onClicked`屬性。這是一個回調，也就是鼠標點擊事件。`MouseArea`可以看作是可以相應鼠標事件的區域。當點擊事件發出時，就會執行`onClicked`中的代碼。這段代碼其實是讓整個程序退出。注意我們的`MouseArea`充滿整個矩形，所以整個區域都可以接受鼠標事件。 當我們運行這個項目時，我們就可以看到一個寬和高都是 360 像素的矩形，中央有一行文本，鼠標點擊矩形任意區域就會使其退出：  接下來我們可以改變 main.qml 文件中的“Hello World”字符串，不重新編譯直接運行，就會看到運行結果也會相應的變化。這說明 QML 文檔是運行時解釋的，不需要經過編譯。所以，利用 QML 的解釋執行的特性，QML 尤其適合于快速開發和原型建模。另外，由于 QML 比 C++ 簡單很多，所以 QML 也適用于提供插件等機制。