Tutoriel QML 2 - Composants QML

Ce chapitre ajoute un sélecteur de couleur permettant de modifier la couleur du texte.

Notre sélecteur de couleur est composé de six cellules de couleurs différentes. Pour éviter d’écrire plusieurs fois le même code 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 s'apparente à une « boîte noire » : il 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, consultez la documentation « Component »). Le nom de fichier du composant doit toujours commencer par une majuscule.

Voici le code QML de l'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)
    }
}

Guide pas à pas

Le composant Cell

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 sert souvent de 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 différentes couleurs. Cette propriété n’est qu’un alias d’une propriété existante : la couleur du rectangle qui compose la cellule (voir Liaison de propriétés).

    signal clicked(cellColor: color)

Nous souhaitons également que notre composant dispose d’un signal que nous appellerons « clicked », avec un paramètre « cellColor » de type « color ». Nous utiliserons ce signal ultérieurement pour modifier la couleur du texte dans le fichier QML principal.

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

Notre composant « cell » est essentiellement un rectangle coloré dont la propriété « id » définit la taille.

La propriété « anchors.fill » est un moyen pratique de définir la taille d’un élément visuel. Dans ce cas, le rectangle aura la même taille que son parent (voir Mise en page basée sur des ancrages).

    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 couleur :

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 couleur en plaçant 6 cellules de couleurs différentes dans une grille.

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

Lorsque le signal « clicked » de notre cellule est déclenché, nous souhaitons définir la couleur du texte en fonction de la couleur de la cellule (« cellColor ») transmise en paramètre. Nous pouvons réagir à n’importe quel signal de notre composant via une propriété nommée « onSignalName » (voir Attributs de signal).