Didacticiel QML 3 - États et transitions

Dans ce chapitre, nous rendons cet exemple un peu plus dynamique en introduisant les états et les transitions.

Nous voulons que notre texte se déplace vers le bas de l'écran, qu'il pivote et qu'il devienne rouge lorsqu'on clique dessus.

Voici le code QML :

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

        MouseArea { id: mouseArea; anchors.fill: parent }

        states: State {
            name: "down"; when: mouseArea.pressed == true
            PropertyChanges {
                helloText {
                    y: 160
                    rotation: 180
                    color: "red"
                }
            }
        }

        transitions: Transition {
            from: ""; to: "down"; reversible: true
            ParallelAnimation {
                NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
                ColorAnimation { duration: 500 }
            }
        }
    }

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

Cheminement

        states: State {
            name: "down"; when: mouseArea.pressed == true
            PropertyChanges {
                helloText {
                    y: 160
                    rotation: 180
                    color: "red"
                }
            }
        }

Tout d'abord, nous créons un nouvel état vers le bas pour notre type de texte. Cet état sera activé lorsque l'on appuie sur le bouton MouseArea et désactivé lorsqu'on le relâche.

L'état bas comprend un ensemble de changements de propriétés par rapport à notre état implicite par défaut (les éléments tels qu'ils ont été initialement définis dans le code QML). Plus précisément, nous fixons la propriété y du texte à 160, la rotation à 180 et la propriété color à rouge.

        transitions: Transition {
            from: ""; to: "down"; reversible: true
            ParallelAnimation {
                NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
                ColorAnimation { duration: 500 }
            }
        }

Comme nous ne voulons pas que le texte apparaisse instantanément au bas de l'écran, mais qu'il se déplace en douceur, nous ajoutons une transition entre nos deux états.

from et to définissent les états entre lesquels la transition sera exécutée. Dans ce cas, nous voulons une transition entre l'état par défaut et l'état bas.

Comme nous voulons que la même transition soit exécutée en sens inverse lorsque nous repassons de l'état "down" à l'état "default", nous définissons reversible à true. Cela revient à écrire les deux transitions séparément.

Le type ParallelAnimation permet de s'assurer que les deux types d'animations (nombre et couleur) démarrent en même temps. Nous pourrions également les exécuter l'une après l'autre en utilisant SequentialAnimation à la place.

Pour plus de détails sur les états et les transitions, voir Qt Quick States et l'exemple d'états et de transitions.

Composants QML Tutoriel QML avancé

© 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.