qml button设置字体颜色_QML怎么自定义组件？一起自定义一个调色板

什么是组件

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

制作一个简单的按钮组件

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

Button.qml

import QtQuick 2.0Rectangle {    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.3import QtQuick.Window 2.2Window {    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.0Item {    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.3import QtQuick.Window 2.2Window {    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 }    }}

运行效果如下：