前言 : Qt Declarative UI 傳得沸沸揚(yáng)揚(yáng),卻很少有中文資料介紹這是一個(gè)什么樣的技術(shù),以及如何使用它。偶爾能搜到幾篇也是掐頭去尾的,讓人摸不著頭腦。CuteQt網(wǎng)友英狐奉獻(xiàn)的三篇文章很有參考價(jià)值,把我?guī)肓碎T。我準(zhǔn)備翻譯的這個(gè)入門教程來自于Qt官方文檔,更多的是語法性的介紹。說是翻譯,其實(shí)是我在原文基礎(chǔ)上的一個(gè)閱讀理解吧。
QML是什么?
QML是一種描訴性的腳本語言,文件格式以.qml結(jié)尾。語法格式非常像CSS(參考后文具體例子),但又支持javacript形式的編程控制。我個(gè)人認(rèn)為它結(jié)合了QtDesigner UI和QtScript的有點(diǎn)。QtDesigner可以設(shè)計(jì)出.ui界面文件,但是不支持和Qt原生C++代碼的交互。QtScript可以和Qt原生代碼進(jìn)行交互,但是有一個(gè)缺點(diǎn),如果要在腳本中創(chuàng)建一個(gè)繼承于QObject的圖形對象非常不方便,只能在Qt代碼中創(chuàng)建圖形對象,然后從QtScript中進(jìn)行訪問。而QML可以在腳本里創(chuàng)建圖形對象,并且支持各種圖形特效,以及狀態(tài)機(jī)等,同時(shí)又能跟Qt寫的C++代碼進(jìn)行方便的交互,使用起來非常方便。
如何使用?
在Qt C++文件中通過QDeclarativeView加載,就像使用UiLoader加載.ui文件一樣。不過本文不會去介紹如何在Qt C++中使用QML,而是把重點(diǎn)放在QML的語法上,不過別擔(dān)心看不到.qml文件的效果。Qt提供了一個(gè)工具QML Viewer可以查看.qml文件生成的效果,該程序在Qt的bin目錄下,應(yīng)用名字叫qml(Windows下叫qmlviewer.exe)。所以你在看到別人提供的.qml文件時(shí),你可以用下面命令qml filename.qml 查看.qml的執(zhí)行結(jié)果,咱們的第一個(gè)Hello,World生成界面如下:
開始QML吧
上面的Hello,World源代碼如下:
1 import Qt 4.7
2
3 Rectangle {
4 id: page
5 width: 500; height: 200
6 color: "lightgray"
7
8 Text {
9 id: helloText
10 text: "Hello world!"
11 font.pointSize: 24; font.bold: true
12 y: 30; anchors.horizontalCenter: page.horizontalCenter
13 }
14 }
第1行是Qt QML的統(tǒng)一用法,指明當(dāng)前QML會使用Qt-4.7里已經(jīng)定義好的類型,比如第3行的Rectangle和第8行的Text。
第3行開始至文章結(jié)束處則定義了一個(gè)矩形的圖形區(qū)域?qū)ο?,?行則申明了該矩形區(qū)域?qū)ο蟮膇d為”page”可以被其它對象識別并通過該id訪問其成員屬性,另外幾個(gè)屬性width/height/color則很好理解,語法跟CSS類似,可以寫在一行中用分號”;”隔開。
第8行至第12行則是一個(gè)文本對象,看它代碼的嵌套結(jié)構(gòu)可以知道它是內(nèi)嵌于Rectangle的。Text的屬性除了anchors其它幾個(gè)都能顧名思義。anchors描訴的是當(dāng)前對象的位置和其它對象的相對關(guān)系,這里看到其水平中心位置在“page“的水平中心位置。如果相對anchors了解更多,請參考錨的解釋。
以上就是Hello,World的全部代碼,將其存為hellowordl.qml,那么只要執(zhí)行 qml hellowrold.qml就能看到文章前頭的界面了。
更多對象?
在上面的代碼中我們用到了Rectangle和Text,那么我還有哪些對象以及這些對象有哪些屬性呢。那么請?jiān)L問QML-Item類,Item類是QML最基礎(chǔ)的類,通過查看它的繼承類以及這些繼承類可用的屬性,你可以添加更多你感興趣的內(nèi)容。
好吧, Happy QML。
本文轉(zhuǎn)自:http://www.cuteqt.com/blog/?p=1629
聯(lián)系客服