QML 组件

参考：QML Tutorial 2 - QML Components - Qt for Python

为了避免多次编写相同的代码，可以创建 QML 组件。组件提供了定义新类型的方法，可以在其他 QML 文件中重用这种类型。

QML 组件就像一个黑盒，通过属性、信号和函数与外部世界进行交互，通常在它自己的 QML 文件中定义。组件的文件名必须总是以大写字母开头。

// Cell.qml
import QtQuick 2.0


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

}

组件的根类型是带有 id 容器的 Item。
Item 是 QML 中最基本的视觉类型，通常用作其他类型的容器。

声明 cellColor 属性。这个属性可以从组件外部访问，这允许我们用不同的颜色实例化单元格。这个属性只是现有属性的别名—组成单元格的矩形的颜色(参见 Property Binding)。

的组件也有一个信号，调用 click 时带有一个类型为 color 的 cellColor 参数。稍后，将使用这个信号来更改主 QML 文件中的文本的颜色。

Cell 组件基本上是带有 id 的彩色矩形。

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

为了在单击单元格时改变文本的颜色，创建 MouseArea 类型，其大小与其父单元格相同。

MouseArea 定义了称为 clicked 的信号。当这个信号被触发时，我们想要发出我们自己的点击信号，并将颜色作为参数。

下面这 main QML 中使用 Cell：

import QtQuick 2.0

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

当单元格的点击信号被触发时，我们希望将文本的颜色设置为作为参数传递的 cellColor。可以通过名为“onSignalName”的属性对组件的任何信号做出反应(参见 Signal Attributes)。