QML チュートリアル 2 - QML コンポーネント

この章では、テキストの色を変更するためのカラーピッカーを追加します。

緑色の「Hello world!」というテキストの下に、6つの色付きセルがある

このカラーピッカーは、それぞれ異なる色の6つのセルで構成されています。各セルごとに同じコードを何度も記述する手間を省くため、新しいCell コンポーネントを作成します。コンポーネントを使用することで、他のQMLファイルでも再利用可能な新しい型を定義することができます。 QMLコンポーネントはブラックボックスのようなもので、プロパティ、シグナル、関数を通じて外部とやり取りを行い、通常は専用のQMLファイルで定義されます（詳細については、Component のドキュメントを参照してください）。コンポーネントのファイル名は、常に大文字で始まる必要があります。

以下は、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)
    }
}

手順

Cellコンポーネント

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

    width: 40; height: 25

このコンポーネントのルートタイプは、id コンテナを持つItem です。Item は QML における最も基本的なビジュアルタイプであり、他のタイプのコンテナとしてよく使用されます。

    property alias cellColor: rectangle.color

cellColor プロパティを宣言します。このプロパティはコンポーネントの外部からアクセス可能であり、これによりセルを異なる色でインスタンス化できます。このプロパティは、セルを構成する矩形の色を表す既存のプロパティへの単なる別名です（「プロパティバインディング」を参照）。

    signal clicked(cellColor: color)

また、このコンポーネントには、color型のcellColorパラメータを持つ「clicked」というシグナルも用意します。このシグナルを使用して、後でメインのQMLファイル内でテキストの色を変更します。

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

このセルコンポーネントは、基本的には `id ` プロパティを持つ色付きの矩形です。

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」という名前のプロパティを通じて反応させることができます（シグナル属性参照）。

値の型状態と遷移

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.