參考：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)。