Tutoriel QML 2 - Composants QML

Ce chapitre ajoute un sélecteur de couleurs pour changer la couleur du texte.

Notre sélecteur de couleurs est composé de six cellules de couleurs différentes. Pour éviter d'écrire le même code plusieurs fois pour chaque cellule, nous créons un nouveau composant Cell. Un composant permet de définir un nouveau type que nous pouvons réutiliser dans d'autres fichiers QML. Un composant QML est comme une boîte noire et interagit avec le monde extérieur par le biais de propriétés, de signaux et de fonctions et est généralement défini dans son propre fichier QML. (Pour plus de détails, voir la documentation Component ). Le nom de fichier du composant doit toujours commencer par une lettre majuscule.

Voici le code QML pour 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)
    }
}

Visite guidée

Le composant Cellule

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

    width: 40; height: 25

Le type racine de notre composant est un Item avec le conteneur id. Un Item est le type visuel le plus basique en QML et est souvent utilisé comme conteneur pour d'autres types.

    property alias cellColor: rectangle.color

Nous déclarons une propriété cellColor. Cette propriété est accessible depuis l'extérieur de notre composant, ce qui nous permet d'instancier les cellules avec des couleurs différentes. Cette propriété est juste un alias d'une propriété existante - la couleur du rectangle qui compose la cellule (voir Property Binding).

    signal clicked(cellColor: color)

Nous voulons que notre composant ait également un signal que nous appelons clicked avec un paramètre cellColor de type color. Nous utiliserons ce signal pour changer la couleur du texte dans le fichier QML principal plus tard.

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

Notre composant cellulaire est essentiellement un rectangle coloré avec le rectangle id.

La propriété anchors.fill est un moyen pratique de définir la taille d'un type visuel. Dans ce cas, le rectangle aura la même taille que son parent (voir Anchor-Based Layout).

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

Afin de modifier la couleur du texte lorsque l'on clique sur une cellule, nous créons un type MouseArea de la même taille que son parent.

Un MouseArea définit un signal appelé clicked. Lorsque ce signal est déclenché, nous voulons émettre notre propre signal clicked avec la couleur comme paramètre.

Le fichier QML principal

Dans notre fichier QML principal, nous utilisons notre composant Cell pour créer le sélecteur de couleurs :

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

Nous créons le sélecteur de couleurs en plaçant 6 cellules de couleurs différentes dans une grille.

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

Lorsque le signal de clic de notre cellule est déclenché, nous voulons que la couleur du texte corresponde à la couleur de la cellule (cellColor ) passée en paramètre. Nous pouvons réagir à n'importe quel signal de notre composant par le biais d'une propriété nommée "onSignalName" (voir Attributs de signal).