初識(shí)QML學(xué)習(xí)機(jī)制
QML是Qt推出的Qt Quick技術(shù)的一部分，是一種新增的簡(jiǎn)便易學(xué)的語(yǔ)言。QML是一種陳述性語(yǔ)言，用來(lái)描述一個(gè)程序的用戶(hù)界面：無(wú)論是什么樣子，以及它如何表現(xiàn)。在QML，一個(gè)用戶(hù)界面被指定為具有屬性的對(duì)象樹(shù)。 這使得Qt更加便于很少或沒(méi)有編程經(jīng)驗(yàn)的人使用。 JavaScript在QML中作為一種腳本語(yǔ)言，對(duì)QML進(jìn)行邏輯方面的編程.。
使用了最基礎(chǔ)的QML類(lèi)型實(shí)現(xiàn)了文字Hello,World的顯示。這篇文章中將會(huì)增加顏色選項(xiàng)面板，用戶(hù)可以給Hello,World設(shè)置不同的顏色，如下圖顯示：
QML組件
從圖中可以看到選項(xiàng)面板由6個(gè)顏色小塊組成，它們唯一的區(qū)別就是顏色不一樣。那么我們就可以用組件(Component)來(lái)實(shí)現(xiàn)一個(gè)顏色塊，然后在需要的時(shí)候使用這個(gè)組件就可以了。組件其實(shí)和其它編程語(yǔ)言中的宏，函數(shù)，類(lèi)，結(jié)構(gòu)體等功能差不多，就是代碼復(fù)用。作為程序員，我知道你懂的。
組件由一個(gè)單獨(dú)的QML文件名組成，文件名總是以大寫(xiě)字母開(kāi)頭，要使用該組件的時(shí)候直接使用該文件名就可以了。關(guān)于如何定義自己的組件，請(qǐng)?jiān)L問(wèn)Defining new Components。我們?yōu)橐粋€(gè)顏色塊定義了一個(gè)Cell.qml文件，然后使用Cell作為一個(gè)去訪問(wèn)它。
Cell.qml的內(nèi)容：
- import Qt 4.7Item {
- id: container
- property alias cellColor: rectangle.color
- signal clicked(color cellColor)
- width: 40; height: 25
- Rectangle {
- id: rectangle
- border.color: "white"
- anchors.fill: parent
- } MouseArea {
- anchors.fill: parent
- onClicked: container.clicked(container.cellColor)
- }
- }
- Item {id: container
- property alias cellColor: rectangle.color
- signal clicked(color cellColor)
- width: 40; height: 25
Item是最常使用的QML類(lèi)型，一般用作其它類(lèi)型的容器，可以理解成最頂級(jí)的父類(lèi)，功能類(lèi)似于QtGui中的QWidget。用一個(gè)屬性別名訪問(wèn)其內(nèi)嵌對(duì)象rectangle的color屬性。在其它文件中可以用Cell對(duì)象的cellColor獲得rectangle的color值。
signal clicked(color cellColor)則為對(duì)象定義了一個(gè)信號(hào)，在代碼的其它部分可以發(fā)出這個(gè)信號(hào)。
- Rectangle {id: rectangle
- border.color: “white”
- anchors.fill: parent}
這一部分沒(méi)有特別好說(shuō)的，在Item中內(nèi)嵌了一個(gè)id為rectangle白邊框的矩形區(qū)域，大小占滿(mǎn)整個(gè)Item。
- MouseArea {
- anchors.fill: parent
- onClicked: container.clicked(container.cellColor)}
MouseArea則為Item增加了一塊鼠標(biāo)響應(yīng)區(qū)，看它的anchors知道，在整個(gè)Item區(qū)域內(nèi)都是鼠標(biāo)活動(dòng)區(qū)，都能偵聽(tīng)到鼠標(biāo)事件。onClicked那一行則相當(dāng)于為鼠標(biāo)單擊事件增加了一個(gè)處理行為，這里是發(fā)出了一個(gè)clicked()的信號(hào)。這個(gè)信號(hào)正是我們?cè)贗tem里定義的那個(gè)signal。
Cell.qml寫(xiě)完了，再來(lái)看看程序的主文件。
main.qml的內(nèi)容：
- import Qt 4.7Rectangle {
- id: page width: 500; height: 200 color: "lightgray" Text {
- id: helloText
- text: "Hello world!"
- y: 30
- anchors.horizontalCenter: page.horizontalCenter
- font.pointSize: 24;
- font.bold: true
- }
- Grid {
- id: colorPicker x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
- rows: 2; columns: 3; spacing: 3
- Cell {
- cellColor: "red";
- onClicked: helloText.color = cellColor
- }
- Cell {
- cellColor: "green";
- onClicked: helloText.color = cellColor
- }
- Cell {
- cellColor: "blue";
- onClicked: helloText.color = cellColor
- }
- Cell {
- cellColor: "yellow"; onClicked: helloText.color = cellColor
- }
- Cell {
- cellColor: "steelblue";
- onClicked: helloText.color = cellColor
- }
- Cell {
- cellColor: "black";
- onClicked: helloText.color = cellColor }
- }
- }
這里在原來(lái)的基礎(chǔ)上增加了一個(gè)Grid網(wǎng)格。x坐標(biāo)是4，底部挨著page的底部，所以我們看到的是在左下角。
新增的6個(gè)Cell，名字和Cell.qml是一樣的。通過(guò)cellColor屬性將顏色傳給了每個(gè)顏色塊。
當(dāng)Cell接收到onClicked事件的時(shí)候,關(guān)聯(lián)的代碼回去修改Hello,World上的顏色。細(xì)心的朋友可能會(huì)注意到Cell只是定義了clicked()的信號(hào)，并沒(méi)有定義onClicked()啊，是的這就是Component的語(yǔ)法規(guī)則了。如果你在Cell.qml里定義的是plicked(),那么你在main.qml中引用的時(shí)候就該用onPlicked()了。
小結(jié)：QML是Qt推出的Qt Quick技術(shù)的一部分，是一種新增的簡(jiǎn)便易學(xué)的語(yǔ)言。本文的代碼也不少了，隨便改動(dòng)改動(dòng)，你會(huì)了解更多QML的秘密的本文借到這！嘿嘿，如有疑問(wèn)，敬請(qǐng)留言。
【編輯推薦】
