繼續介紹QML入門教程。QML是一種描訴性的腳本語言，文件格式以.qml結尾。語法格式非常像CSS(參考后文具體例子)，但又支持javacript形式的編程控制。

上一篇文章里我們使用了最基礎的QML類型實現了文字Hello,World的顯示。這篇文章中將會增加顏色選項面板，用戶可以給Hello,World設置不同的顏色，如下圖顯示 ：

QML組件

從圖中可以看到選項面板由6個顏色小塊組成，它們唯一的區別就是顏色不一樣。那么我們就可以用組件(Component)來實現一個顏色塊，然后在需要的時候使用這個組件就可以了。組件其實和其它編程語言中的宏，函數，類，結構體等功能差不多，就是代碼復用。作為程序員，我知道你懂的。

組件由一個單獨的QML文件名組成，文件名總是以大寫字母開頭，要使用該組件的時候直接使用該文件名就可以了。關于如何定義自己的組件，請訪問Defining new Components。我們為一個顏色塊定義了一個Cell.qml文件，然后使用Cell作為一個去訪問它。

Cell.qml的內容

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)  
    }  
} 

挨個看代碼～

Item {  
id: container  
property alias cellColor: rectangle.color  
signal clicked(color cellColor)  
width: 40; height: 25 

Item是最常使用的QML類型，一般用作其它類型的容器，可以理解成最頂級的父類，功能類似于QtGui中的QWidget。用一個屬性別名訪問其內嵌對象rectangle的color屬性。在其它文件中可以用Cell對象的cellColor獲得rectangle的color值。

signal clicked(color cellColor)則為對象定義了一個信號，在代碼的其它部分可以發出這個信號。

Rectangle {  
id: rectangle  
border.color: “white”  
anchors.fill: parent  
} 

這一部分沒有特別好說的，在Item中內嵌了一個id為rectangle白邊框的矩形區域，大小占滿整個Item。

MouseArea {  
anchors.fill: parent  
onClicked: container.clicked(container.cellColor)  
} 

MouseArea則為Item增加了一塊鼠標響應區，看它的anchors知道，在整個Item區域內都是鼠標活動區，都能偵聽到鼠標事件。onClicked那一行則相當于為鼠標單擊事件增加了一個處理行為，這里是發出了一個clicked()的信號。這個信號正是我們在Item里定義的那個signal。

Cell.qml寫完了，再來看看程序的主文件。

main.qml的內容

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 }  
     }  
 } 

這里在原來的基礎上增加了一個Grid網格。x坐標是4，底部挨著page的底部，所以我們看到的是在左下角。

新增的6個Cell，名字和Cell.qml是一樣的。通過cellColor屬性將顏色傳給了每個顏色塊。

當Cell接收到onClicked事件的時候,關聯的代碼回去修改Hello,World上的顏色。細心的朋友可能會注意到Cell只是定義了clicked()的信號，并沒有定義onClicked()啊，是的這就是Component的語法規則了。如果你在Cell.qml里定義的是plicked(),那么你在main.qml中引用的時候就該用onPlicked()了。

好了，代碼也不少了，隨便改動改動，你會了解更多QML的秘密的。

小結：QML入門教程，已經介紹兩篇了，不知道你了解的怎么樣了，如果還想繼續深入的話，那么就看下一篇關于QML的介紹吧。