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