参考：QML Tutorial 2 - QML Components - Qt for Python
为了避免多次编写相同的代码，可以创建 QML 组件。组件提供了定义新类型的方法，可以在其他 QML 文件中重用这种类型。
QML 组件就像一个黑盒，通过属性、信号和函数与外部世界进行交互，通常在它自己的 QML 文件中定义。组件的文件名必须总是以大写字母开头。
// Cell.qml
import QtQuick 2.0
Item {
id: container
property alias cellColor: rectangle.color
signal clicked(cellColor: color)
width: 40; height: 25
Rectangle {
id: rectangle
border.color: "white"
anchors.fill: parent
}
MouseArea {
anchors.fill: parent
onClicked: container.clicked(container.cellColor)
}
}
组件的根类型是带有 id 容器的 Item。
Item 是 QML 中最基本的视觉类型，通常用作其他类型的容器。
声明 cellColor 属性。这个属性可以从组件外部访问，这允许我们用不同的颜色实例化单元格。这个属性只是现有属性的别名—组成单元格的矩形的颜色(参见 Property Binding)。
的组件也有一个信号，调用 click 时带有一个类型为 color 的 cellColor 参数。稍后，将使用这个信号来更改主 QML 文件中的文本的颜色。
Cell 组件基本上是带有 id 的彩色矩形。
anchors.fill 属性是设置可视类型大小的方便方法。在这种情况下，矩形的大小将与其父矩形相同。
为了在单击单元格时改变文本的颜色，创建 MouseArea 类型，其大小与其父单元格相同。
MouseArea 定义了称为 clicked 的信号。当这个信号被触发时，我们想要发出我们自己的点击信号，并将颜色作为参数。
下面这 main QML 中使用 Cell：
import QtQuick 2.0
Rectangle {
id: page
width: 320; height: 480
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 }
}
}
当单元格的点击信号被触发时，我们希望将文本的颜色设置为作为参数传递的 cellColor。可以通过名为“onSignalName”的属性对组件的任何信号做出反应(参见 Signal Attributes)。
