先看一下效果圖：

實(shí)現(xiàn)功能：點(diǎn)擊不同的色塊可以改變文字的顏色。

實(shí)現(xiàn)步驟：

一、創(chuàng)建一個(gè)默認(rèn)的Qt?Quick工程:

?

?

二、添加文件Cell.qml

這一步主要是為了實(shí)現(xiàn)一個(gè)自定義的組件，這個(gè)組件就是我們看到的那個(gè)色塊，很明顯定義成組件可以則兼UI的復(fù)用。

1 import QtQuick 2.0 2 3 Item { 4 id: container; 5 property alias cellColor: rectangle.color; 6 signal clicked(color cellColor); 7 8 9 width:40; 10 height:25; 11 12 Rectangle { 13 id: rectangle; 14 border.color: "white"; 15 anchors.fill: parent; 16 } 17 18 MouseArea { 19 anchors.fill: parent; 20 onClicked: container.clicked(container.cellColor) 21 } 22 23 } View Code

?

我們組件的根元素是一個(gè)id名為?container的Item。Item是一個(gè)最基本的可視元素并經(jīng)常用作其它元素的容器，這個(gè)Cell文件相當(dāng)于一個(gè)自定義組件，自定義組件只能有一個(gè)根容器，組件名通常采用和Java定義公共類相同的規(guī)則。

?1 property alias cellColor: rectangle.color;?

聲明一個(gè)cellColor屬性，這個(gè)屬性是從我們組件外訪問的，允許我們使用不同的顏色來實(shí)例化單元格，該屬性只是對(duì)現(xiàn)存的屬性使用了一個(gè)別名，相當(dāng)于我們?yōu)檫@個(gè)Cell組件定義了一個(gè)屬性，而這個(gè)屬性就是Rectangle組件的顏色屬性的引用。

?signal clicked(color cellColor);?

定義了一個(gè)信號(hào)，出發(fā)這個(gè)信號(hào)的條件是：

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

也就是點(diǎn)擊整個(gè)組件，信號(hào)會(huì)帶一個(gè)color類型的參數(shù)，傳遞給捕獲信號(hào)的地方。

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

?

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

?

?

1 import QtQuick 2.4 2 import QtQuick.Window 2.2 3 4 Window { 5 id: window 6 visible: true 7 width: 500; 8 height: 200; 9 10 11 Rectangle { 12 id:content 13 color: 'lightgray' 14 anchors.fill: parent 15 16 Text{ 17 id: helloText; 18 text: "hello world!"; 19 y:30; 20 anchors.horizontalCenter: parent.horizontalCenter 21 font.pointSize: 24; 22 font.bold: true; 23 } 24 25 Grid { 26 id: colorPicker; 27 x:4; 28 anchors.bottom: parent.bottom; 29 anchors.bottomMargin: 4; 30 rows:2; 31 columns: 3; 32 spacing: 3; 33 34 Cell { cellColor: 'red'; onClicked: helloText.color = cellColor; } 35 Cell { cellColor: 'green'; onClicked: helloText.color = cellColor; } 36 Cell { cellColor: 'blue'; onClicked: helloText.color = cellColor; } 37 Cell { cellColor: 'yellow'; onClicked: helloText.color = cellColor; } 38 Cell { cellColor: 'steelblue'; onClicked: helloText.color = cellColor; } 39 Cell { cellColor: 'black'; onClicked: helloText.color = cellColor; } 40 } 41 } 42 } View Code

?

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

在Window內(nèi)嵌套一個(gè)Rectangle的原因是方便更好的布局，因?yàn)閃indow代表了整個(gè)窗體，我們?cè)诶锩媲短滓粋€(gè)Rectangle只是填充了其主布局，Window還可以包含菜單欄，狀態(tài)欄等。

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

我們?cè)诰W(wǎng)格中放置六個(gè)單元格，使用不同的顏色來創(chuàng)建一個(gè)顏色拾取器。當(dāng)我們單元格的clicked信號(hào)觸發(fā)時(shí)，需要傳遞cellColor參數(shù)來設(shè)置文本的顏色?。通過一個(gè)屬性的‘onSignalName’的命名方式來應(yīng)付組件的任何信號(hào)。

?

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/csulennon/p/qml.html

總結(jié)

以上是生活随笔為你收集整理的从头学Qt Quick（3）-- 用QML写一个简单的颜色选择器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。