新手必學(xué) QML入門教程 (1)
本文介紹QML入門教程的文章，教你如何學(xué)習(xí)QML。在QML，一個(gè)用戶界面被指定為具有屬性的對象樹。 這使得Qt更加便于很少或沒有編程經(jīng)驗(yàn)的人使用。
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文件一樣。不過本文不會(huì)去介紹如何在Qt C＋＋中使用QML，而是把重點(diǎn)放在QML的語法上，不過別擔(dān)心看不到.qml文件的效果。Qt提供了一個(gè)工具QML Viewer可以查看.qml文件生成的效果，該程序在Qt的bin目錄下，應(yīng)用名字叫qml(Windows下叫qml.exe)。所以你在看到別人提供的.qml文件時(shí)，你可以用下面命令qml filename.qml 查看.qml的執(zhí)行結(jié)果，咱們的***個(gè)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)一用法，指明當(dāng)前QML會(huì)使用Qt-4.7里已經(jīng)定義好的類型，比如第3行的Rectangle和第8行的Text。
第3行開始至文章結(jié)束處則定義了一個(gè)矩形的圖形區(qū)域?qū)ο螅?行則申明了該矩形區(qū)域?qū)ο蟮膇d為”page”可以被其它對象識(shí)別并通過該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)容。
