QML-Tutorial 2 – QML-Komponenten

In diesem Kapitel wird ein Farbwähler hinzugefügt, mit dem die Farbe des Textes geändert werden kann.

Unsere Farbauswahl besteht aus sechs Zellen mit unterschiedlichen Farben. Um zu vermeiden, dass wir denselben Code für jede Zelle mehrfach schreiben müssen, erstellen wir eine neue „ Cell “-Komponente. Eine Komponente bietet die Möglichkeit, einen neuen Typ zu definieren, den wir in anderen QML-Dateien wiederverwenden können. Eine QML-Komponente ist wie eine Blackbox, die über Eigenschaften, Signale und Funktionen mit der Außenwelt interagiert und in der Regel in einer eigenen QML-Datei definiert wird. (Weitere Details finden Sie in der Dokumentation unter „ Component “). Der Dateiname der Komponente muss immer mit einem Großbuchstaben beginnen.

Hier ist der QML-Code für „ Cell.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)
    }
}

Schritt-für-Schritt-Anleitung

Die „Cell“-Komponente

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

    width: 40; height: 25

Der Stammtyp unserer Komponente ist ein ` Item ` mit dem Container` id `. Ein ` Item ` ist der grundlegendste visuelle Typ in QML und wird häufig als Container für andere Typen verwendet.

    property alias cellColor: rectangle.color

Wir deklarieren eine Eigenschaft „ cellColor “. Auf diese Eigenschaft kann von außerhalb unserer Komponente zugegriffen werden, wodurch wir die Zellen mit unterschiedlichen Farben instanziieren können. Diese Eigenschaft ist lediglich ein Alias für eine bereits vorhandene Eigenschaft – die Farbe des Rechtecks, aus dem die Zelle besteht (siehe Eigenschaftsbindung).

    signal clicked(cellColor: color)

Wir möchten, dass unsere Komponente außerdem über ein Signal namens „clicked“ mit einem Parameter „cellColor“ vom Typ „color“ verfügt. Dieses Signal werden wir später verwenden, um die Farbe des Texts in der Haupt-QML-Datei zu ändern.

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

Unsere Zellkomponente ist im Grunde ein farbiges Rechteck mit der Eigenschaft „ id “.

Die Eigenschaft „ anchors.fill “ ist eine bequeme Möglichkeit, die Größe eines visuellen Elements festzulegen. In diesem Fall hat das Rechteck dieselbe Größe wie sein übergeordnetes Element (siehe „Ankerbasiertes Layout“).

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

Um die Farbe des Textes beim Klicken auf eine Zelle zu ändern, erstellen wir einen „ MouseArea “-Typ mit derselben Größe wie sein übergeordnetes Element.

Ein „ MouseArea “ definiert ein Signal namens „clicked“. Wenn dieses Signal ausgelöst wird, möchten wir unser eigenes „clicked “-Signal mit der Farbe als Parameter ausgeben.

Die Haupt-QML-Datei

In unserer Haupt-QML-Datei verwenden wir unsere „ Cell “-Komponente, um die Farbauswahl zu erstellen:

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

Wir erstellen den Farbwähler, indem wir 6 Zellen mit unterschiedlichen Farben in einem Raster anordnen.

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

Wenn das Signal „clicked“ unserer Zelle ausgelöst wird, möchten wir die Farbe des Textes auf die als Parameter übergebene „cellColor“ setzen. Wir können auf jedes Signal unserer Komponente über eine Eigenschaft mit dem Namen „onSignalName“ reagieren (siehe Signalattribute).