从头学Qt Quick（3）-- 用QML写一个简单的颜色选择器

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

先看一下效果图：

实现功能：点击不同的色块可以改变文字的颜色。

实现步骤：

一、创建一个默认的Qt Quick工程:

二、添加文件Cell.qml

这一步主要是为了实现一个自定义的组件，这个组件就是我们看到的那个色块，很明显定义成组件可以则兼UI的复用。

import QtQuick 2.0 Item {
id: container;
property alias cellColor: rectangle.color;
signal clicked(color cellColor); width:;
height:; Rectangle {
id: rectangle;
border.color: "white";
anchors.fill: parent;
} MouseArea {
anchors.fill: parent;
onClicked: container.clicked(container.cellColor)
} }

我们组件的根元素是一个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:; Rectangle {
id:content
color: 'lightgray'
anchors.fill: parent Text{
id: helloText;
text: "hello world!";
y:;
anchors.horizontalCenter: parent.horizontalCenter
font.pointSize: 24;
font.bold: true;
} Grid {
id: colorPicker;
x:;
anchors.bottom: parent.bottom;
anchors.bottomMargin:;
rows:;
columns:;
spacing:; 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; }
}
}
}