從頭學Qt Quick（3）-- 用QML寫一個簡單的顏色選擇器

先看一下效果圖：

實現功能：點擊不同的色塊可以改變文字的顏色。

實現步驟：

一、創建一個默認的Qt Quick工程:

 

 

二、添加文件Cell.qml

這一步主要是為了實現一個自定義的組件，這個組件就是我們看到的那個色塊，很明顯定義成組件可以則兼UI的復用。

import QtQuick 2.0  2 
Item {
 id: container;
 property alias cellColor: rectangle.color;
 signal clicked(color cellColor);  7 

 width:40;
 height:25;

 Rectangle { 13  id: rectangle;
 border.color: "white";
 anchors.fill: parent;
    }

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

}

 

我們組件的根元素是一個id名為 container的Item。Item是一個最基本的可視元素並經常用作其它元素的容器，這個Cell文件相當於一個自定義組件，自定義組件只能有一個根容器，組件名通常采用和Java定義公共類相同的規則。

 property alias cellColor: rectangle.color; 

聲明一個cellColor屬性，這個屬性是從我們組件外訪問的，允許我們使用不同的顏色來實例化單元格，該屬性只是對現存的屬性使用了一個別名，相當於我們為這個Cell組件定義了一個屬性，而這個屬性就是Rectangle組件的顏色屬性的引用。

 signal clicked(color cellColor); 

定義了一個信號，出發這個信號的條件是：

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

也就是點擊整個組件，信號會帶一個color類型的參數，傳遞給捕獲信號的地方。

anchors.fill屬性是設置元素尺寸的簡便辦法。在這種情況下矩形將擁有父級同樣尺寸的大小。MouseArea是鼠標被捕獲的區域，這個區域很明顯填充了整個父控件，即整個空間。我們捕捉了點擊的事件onClicked 在onClicked后面跟一個匿名的JavaScript函數或者一個定義好的函數名，即當發生點擊的時候觸發了container 的clicked信號。

 

三、編寫main.qml使用Cell組件

 

 

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    id: window
    visible: true
    width: 500;
    height: 200;


    Rectangle {
        id:content
        color: 'lightgray'
        anchors.fill: parent

        Text{
            id: helloText;
            text: "hello world!";
            y:30;
            anchors.horizontalCenter: parent.horizontalCenter
            font.pointSize: 24;
            font.bold: true;
        }

        Grid {
            id: colorPicker;
            x:4;
            anchors.bottom: parent.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; }
        }
    }
}

 

在我們的主QML文件中，我們使用Cell組件來創建顏色拾取器：

在Window內嵌套一個Rectangle的原因是方便更好的布局，因為Window代表了整個窗體，我們在里面嵌套一個Rectangle只是填充了其主布局，Window還可以包含菜單欄，狀態欄等。

 Cell { cellColor: 'red'; onClicked: helloText.color = cellColor; } 

我們在網格中放置六個單元格，使用不同的顏色來創建一個顏色拾取器。當我們單元格的clicked信號觸發時，需要傳遞cellColor參數來設置文本的顏色 。通過一個屬性的‘onSignalName’的命名方式來應付組件的任何信號。

 

本文參考：Qt_quick中文手冊, http://download.csdn.net/detail/csulennon/9425207

代碼下載：http://download.csdn.net/detail/csulennon/9425208