從 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 元素按照一定的嵌套關系構成復雜的組件,供用戶交互。
——摘自《Qt學習之路2》
helloworld實例:
新建項目如圖:
選擇Qt Quick Application,組件選擇Qt Quick 2.1
創建項目成功之后,Qt會為我們自動生成一系列文件:
我們真正需要關注的是:main.qml 里面的內容
1 import QtQuick 2.1
2 import QtQuick.Window 2.0
3
4 Window { 5 visible: true
6 width: 360
7 height: 360
8
9 MouseArea { 10 anchors.fill: parent 11 onClicked: { 12 Qt.quit(); 13 } 14 } 15
16 Text { 17 text: qsTr("Hello World") 18 anchors.centerIn: parent 19 } 20 }
如上述代碼所示,一個 QML 文檔分為 import 和 declaration 兩部分。前者用於引入文檔中所需要的組件(有可能是類庫,也可以是一個 JavaScript 文件或者另外的 QML 文件);后者用於聲明本文檔中的 QML 元素。
每一個 QML 有且只有一個根元素,類似於 XML 文檔。這個根元素就是這個 QML 文檔中定義的 QML 元素,在這個例子中就是一個 Window 對象。注意一下這個 QML 文檔的具體語法,非常類似於 JSON 的定義,使用鍵值對的形式區分元素屬性。所以我們能夠很清楚看到,我們定義了一個窗口,可見性為真,寬度為 360 像素,高度為 360 像素。記得我們說過,QML 文檔定義了一個對象樹,所以 QML 文檔中元素是可以嵌套的。在這個窗口中,我們又增加了一個 Text 元素,顧名思義,就是一個文本。Text 顯示的是 Hello World 字符串,而這個字符串是由 qsTr()函數返回的。qsTr()函數就是 QObject::tr()函數的 QML 版本,用於返回可翻譯的字符串。Text 的位置則是由錨點(anchor)定義。示例中的 Text 位置定義為 parent 中心,其中 parent 屬性就是這個元素所在的外部的元素。anchors.centerIn: parent
同理,我們可以看到MouseArea 是充滿父元素的。MouseArea 還有一個 onClicked 屬性。這是一個回調,也就是鼠標點擊事件。 MouseArea可以看作是可以相應鼠標事件的區域。當點擊事件發出時,就會執行 onClicked 中的代碼。這段代碼其實是讓整個程序退出。注意我們的 MouseArea充滿整個矩形anchors.fill: parent
,所以整個區域都可以接受鼠標事件。
運行效果示例:
接下來我們可以改變 main.qml 文件中的“Hello World”字符串,不重新編譯直接運行,就會看到運行結果也會相應的變化。這說明 QML 文檔是運行時解釋的,不需要經過編譯。所以,利用 QML 的解釋執行的特性,QML 尤其適合於快速開發和原型建模。另外,由於QML 比 C++ 簡單很多,所以 QML 也適用於提供插件等機制。