Tutoriel QML 3 - États et transitions

Dans ce chapitre, nous allons rendre cet exemple un peu plus dynamique en introduisant des états et des transitions.

Nous voulons que notre texte se déplace vers le bas de l'écran, pivote et 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 }
    }
}

Démarche

        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 « down » pour notre type de texte. Cet état sera activé lorsque l’ MouseArea sera enfoncé, et désactivé lorsqu’il sera relâché.

L’état « down » comprend un ensemble de modifications de propriétés par rapport à notre état par défaut implicite (les éléments tels qu’ils ont été initialement définis dans le QML). Plus précisément, nous définissons la propriété « y » du texte sur « 160 », la rotation sur « 180 » et la propriété « color » sur « red ».

        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 en bas, mais qu’il se déplace plutôt en douceur, nous ajoutons une transition entre nos deux états.

from et to définissent les états entre lesquels la transition s'effectuera. Dans ce cas, nous souhaitons une transition de l'état par défaut vers notre état « down ».

Comme nous souhaitons que la même transition s’exécute en sens inverse lors du retour de l’état « vers le bas » à l’état par défaut, nous définissons reversible sur true. Cela revient à écrire les deux transitions séparément.

Le type « ParallelAnimation » garantit que les deux types d’animations (nombre et couleur) démarrent simultanément. Nous pourrions également les exécuter l’une après l’autre en utilisant plutôt « SequentialAnimation ».

Pour plus de détails sur les états et les transitions, consultez la section États d’Qt Quick ainsi que l’exemple sur les états et les transitions.

Composants QML Tutoriel avancé sur QML

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