组件(Component)
组件其实和其它编程语言中的宏，函数，类，结构体等功能差不多，就是代码复用。作为程序员，我知道你懂的。组件由一个单独的QML文件名组成，文件名总是以大写字母开头，要使用该组件的时候直接使用该文件名就可以了。
例子：
建立一个颜色模块组件 ColorBlock.qml
import QtQuick 2.0
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是最常使用的QML类型，一般用作其它类型的容器，可以理解成最顶级的父类，功能类似于QtGui中的QWidget。
然后在 main.qml 引用这个颜色模块组件,这里定义了一个2行3列的格布局。
import QtQuick 2.0
Rectangle {
id: page
width: 500; height: 200
color: "lightGray"
Text {
id: helloText
text: qsTr("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
ColorBlock { cellColor: "red"; onClicked: helloText.color = cellColor }
ColorBlock { cellColor: "green"; onClicked: helloText.color = cellColor }
ColorBlock { cellColor: "blue"; onClicked: helloText.color = cellColor }
ColorBlock { cellColor: "yellow"; onClicked: helloText.color = cellColor }
ColorBlock { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
ColorBlock { cellColor: "black"; onClicked: helloText.color = cellColor }
}
}
选择颜色模块组件来改变Hello world! 字体颜色。
最后效果如下图：
自定义颜色模块组件.PNG
