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属性。这个属性可以从组件的外部访问，这允许我们用不同的颜色实例化单元格。这个属性只是现有属性的一个别名——组成单元格的矩形的颜色（参见属性绑定）。

signal clicked(cellColor: color)

我们希望我们的组件也有一个信号，我们称之为clicked，带有一个类型为color的cellColor参数。我们稍后将在主QML文件中使用此信号来更改文本的颜色。

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

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

anchors.fill 属性是一种设置视觉类型大小的便捷方式。在这种情况下，矩形将与其父级具有相同的大小（参见 Anchor-Based Layout ）。

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’的属性来响应我们组件的任何信号（参见信号属性）。