QML教程2 - QML组件

本章添加了一个颜色选择器来更改文本颜色。

我们的颜色选择器由六个不同颜色的单元格组成。为了避免为每个单元格重复编写相同的代码，我们创建了一个新的Cell组件。组件提供了一种定义新类型的方法，我们可以在其他QML文件中重复使用它。QML组件就像一个黑盒，通过属性、信号和函数与外界交互，通常在其自己的QML文件中定义。（有关更多详细信息，请参阅组件文档）。组件的文件名必须始终以大写字母开头。

下面是Cell.qml的QML代码

import QtQuick

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)
    }
}

漫步

单元格组件

Item {
    id: container
    property alias cellColor: rectangle.color
    signal clicked(cellColor: color)

    width: 40; height: 25

我们组件的根类型是一个具有id container的Item。Item是QML中最基本的视觉类型，经常被用作其他类型的容器。

    property alias cellColor: rectangle.color

我们声明了一个cellColor属性。这个属性可以从outside我们的组件中访问，这允许我们用不同的颜色实例化单元格。这个属性只是一个对现有属性——组成单元格的矩形的颜色的别名（请参阅属性绑定）。

    signal clicked(cellColor: color)

我们希望我们的组件还包含一个名为clicked的信号，该信号接收一个类型为color的cellColor参数。我们将使用此信号来在之后的锚点布局中更改主QML文件中文本的颜色。

    Rectangle {
        id: rectangle
        border.color: "white"
        anchors.fill: parent
    }

我们的单元格组件基本上是一个具有id rectangle的彩色矩形。

anchors.fill属性是一种方便地设置视觉类型大小的方法。在这种情况下，矩形将与其父元素具有相同的大小。

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

为了在单击单元格时更改文本的颜色，我们创建了一个大小与父元素相同的MouseArea类型。

MouseArea定义了一个名为clicked的信号。当此信号被触发时，我们希望发射我们自己的clicked信号，并将颜色作为参数。

主QML文件

在我们的主QML文件中，我们使用我们的Cell组件来创建颜色选择器

import QtQuick

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 }
    }
}

我们通过在网格中放置6个不同颜色的单元格来创建颜色选择器。

        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }

当我们的单元格的clicked信号被触发时，我们想要将文本颜色设置为参数传递的cellColor。我们可以通过名为'onSignalName'的属性来对我们的组件的任何信号做出反应（参见信号属性）。

QML教程 1 - 值类型 QML教程 3 - 状态和转换