什么是组件

一个组件是一个可以重复使用的元素，QML提供几种不同的方法来创建组件。我今天将讲解其中的一种，即一个文件就是一个基础组件。一个以文件为基础的组件在文件中创建了一个QML元素，并且将文件以元素类型来命令（例如Button.qml）。你可以任何其它的QtQuick模块中使用元素一样来使用这个组件。

制作一个简单的按钮组件

在下面的例子中，我将创建一个包含文本和鼠标区域的矩形框。它就类似于一个简单的按钮。

Button.qml

import QtQuick 2.0

Rectangle {
    id: root
    property alias text: label.text
    signal clicked

    width: 116; height: 26
    color: "lightsteelblue"
    border.color: "slategray"

    Text {
        id: label
        anchors.centerIn: parent
        text: "Start"
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            root.clicked()
        }
    }
}

上面我们新建了一个Button.qml，我们使用QML的alias（别名）功能，它可以将内部嵌套的QML元素的属性导出到外面使用，但只有根级目录的属性才能够被其它文件的组件访问。我使用text属性来设置文本，然后通过鼠标区域实现我们自己的点击操作。

然后我们就可以在其它的文件中使用我们上面自定义的Button元素啦。使用示例：

main.qml

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480

    Button {
        id: button1
        x: 12; y: 12
        text: "test1"
        onClicked: {
            status.text = "This is test1!"
        }
    }

    Button {
        id: button2
        x: 162; y: 12
        text: "test2"
        onClicked: {
            status.text = "This is test2!"
        }
    }

    Button {
        id: button3
        x: 312; y: 12
        text: "test3"
        onClicked: {
            status.text = "This is test3!"
        }
    }

    Text {
        id: status
        x: 12; y: 76
        width: 116; height: 26
        text: "waiting..."
        horizontalAlignment: Text.AlignHCenter
    }
}

项目结果如下图所示：

运行效果：

自定义调色板

以Windows画图里面的调试板为例，其实就可以看成是由很多个小的按钮组成的，然后每个按钮有不同的背景色，点击某个按钮后，响应并调用一个函数，进行该按钮所代表的颜色的设置。

那么我们先来实现一个颜色按钮，基本和上面的自定义按钮差不多，

colorButton.qml

import QtQuick 2.0

Item {
    id: root
    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: root.clicked(root.cellColor)
    }
}

然后在 main.qml 使用这个自定义颜色按钮，然后使用了一个6行6列的栅格布局来布局这些按钮，就类似于Qt GUI中的QGridLayout。

main.qml

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    color: "lightGray"

    Text {
        id: testText
        text: "This is a test text!"
        y: 30
        anchors.horizontalCenter: parent
        font.pointSize: 24;
        font.bold: true
    }

    Grid {
        id: colorPalette
        x: 10; y: 100
        rows: 6; columns: 6; spacing: 3

        ColorButton { cellColor: "#FF0000"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF0033"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF0066"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF0099"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF00CC"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF00FF"; onClicked: testText.color = cellColor }

        ColorButton { cellColor: "#FF3300"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF3333"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF3366"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF3399"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF33CC"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF33FF"; onClicked: testText.color = cellColor }

        ColorButton { cellColor: "#FF6600"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF6633"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF6666"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF6699"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF66CC"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF66FF"; onClicked: testText.color = cellColor }

        ColorButton { cellColor: "#FF9900"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF9933"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF9966"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF9999"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF99CC"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FF99FF"; onClicked: testText.color = cellColor }

        ColorButton { cellColor: "#FFCC00"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FFCC33"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FFCC66"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FFCC99"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FFCCCC"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FFCCFF"; onClicked: testText.color = cellColor }

        ColorButton { cellColor: "#FFFF00"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FFFF33"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FFFF66"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FFFF99"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FFFF99"; onClicked: testText.color = cellColor }
        ColorButton { cellColor: "#FFFFFF"; onClicked: testText.color = cellColor }
    }
}

运行效果如下：