新手必學 QML入門教程 (1)
本文介紹QML入門教程的文章,教你如何學習QML。在QML,一個用戶界面被指定為具有屬性的對象樹。 這使得Qt更加便于很少或沒有編程經驗的人使用。
Qt Declarative UI 傳得沸沸揚揚,卻很少有中文資料介紹這是一個什么樣的技術,以及如何使用它。偶爾能搜到幾篇也是掐頭去尾的,讓人摸不著頭腦。CuteQt網友英狐奉獻的三篇文章很有參考價值,把我?guī)肓碎T。我準備翻譯的這個入門教程來自于Qt官方文檔,更多的是語法性的介紹。說是翻譯,其實是我在原文基礎上的一個閱讀理解吧。
QML是什么?
QML是一種描訴性的腳本語言,文件格式以.qml結尾。語法格式非常像CSS(參考后文具體例子),但又支持javacript形式的編程控制。我個人認為它結合了QtDesigner UI和QtScript的有點。QtDesigner可以設計出.ui界面文件,但是不支持和Qt原生C++代碼的交互。QtScript可以和Qt原生代碼進行交互,但是有一個缺點,如果要在腳本中創(chuàng)建一個繼承于QObject的圖形對象非常不方便,只能在Qt代碼中創(chuàng)建圖形對象,然后從QtScript中進行訪問。而QML可以在腳本里創(chuàng)建圖形對象,并且支持各種圖形特效,以及狀態(tài)機等,同時又能跟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的執(zhí)行結果,咱們的***個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的統(tǒng)一用法,指明當前QML會使用Qt-4.7里已經定義好的類型,比如第3行的Rectangle和第8行的Text。
第3行開始至文章結束處則定義了一個矩形的圖形區(qū)域對象,第4行則申明了該矩形區(qū)域對象的id為”page”可以被其它對象識別并通過該id訪問其成員屬性,另外幾個屬性width/height/color則很好理解,語法跟CSS類似,可以寫在一行中用分號”;”隔開。
第8行至第12行則是一個文本對象,看它代碼的嵌套結構可以知道它是內嵌于Rectangle的。Text的屬性除了anchors其它幾個都能顧名思義。anchors描訴的是當前對象的位置和其它對象的相對關系,這里看到其水平中心位置在“page“的水平中心位置。如果相對anchors了解更多,請參考錨的解釋。
以上就是Hello,World的全部代碼,將其存為hellowordl.qml,那么只要執(zhí)行 qml hellowrold.qml就能看到文章前頭的界面了。
更多對象?
在上面的代碼中我們用到了Rectangle和Text,那么我還有哪些對象以及這些對象有哪些屬性呢。那么請訪問QML-Item類,Item類是QML最基礎的類,通過查看它的繼承類以及這些繼承類可用的屬性,你可以添加更多你感興趣的內容。