新手必學(xué) QML入門教程 (2)
繼續(xù)介紹QML入門教程。QML是一種描訴性的腳本語(yǔ)言，文件格式以.qml結(jié)尾。語(yǔ)法格式非常像CSS(參考后文具體例子)，但又支持javacript形式的編程控制。
上一篇文章里我們使用了最基礎(chǔ)的QML類型實(shí)現(xiàn)了文字Hello,World的顯示。這篇文章中將會(huì)增加顏色選項(xiàng)面板，用戶可以給Hello,World設(shè)置不同的顏色，如下圖顯示 ：
QML組件
從圖中可以看到選項(xiàng)面板由6個(gè)顏色小塊組成，它們唯一的區(qū)別就是顏色不一樣。那么我們就可以用組件(Component)來(lái)實(shí)現(xiàn)一個(gè)顏色塊，然后在需要的時(shí)候使用這個(gè)組件就可以了。組件其實(shí)和其它編程語(yǔ)言中的宏，函數(shù)，類，結(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.7
- Item {
- 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)
- }
- }
挨個(gè)看代碼～
- Item {
- id: container
- property alias cellColor: rectangle.color
- signal clicked(color cellColor)
- width: 40; height: 25
Item是最常使用的QML類型，一般用作其它類型的容器，可以理解成最頂級(jí)的父類，功能類似于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ū)域，大小占滿整個(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.7
- Rectangle {
- 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()了。
好了，代碼也不少了，隨便改動(dòng)改動(dòng)，你會(huì)了解更多QML的秘密的。
小結(jié)：QML入門教程，已經(jīng)介紹兩篇了，不知道你了解的怎么樣了，如果還想繼續(xù)深入的話，那么就看下一篇關(guān)于QML的介紹吧。
