Le tutoriel QML, troisième partie : états et transitions

Dans ce chapitre, on rend l'exemple un peu plus dynamique en introduisant les états et transitions. On souhaite que notre texte se déplace vers le bas de l'écran, tourne et devienne rouge lorsqu'un clic est effectué sur celui-ci.

Voici le code QML :

 import QtQuick 1.0
 
 Rectangle {
     id: page
     width: 500; height: 200
     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 { target: 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 }
     }
 }

Explications

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

Tout d'abord, on crée un nouvel état down pour l'élément Text. Cet état est activé lorsque la MouseArea est appuyée et désactivée lorsque le bouton de la souris est relâché.

L'état down inclut un ensemble de changements pour les propriétés dont les valeurs initiales sont l›état par défaut (les éléments tels qu'ils ont été définis dans le QML). Précisément, on définit la propriété y du texte à 160, la rotation à 180 et la couleur à rouge.

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

Comme on ne veut pas que le texte apparaisse instantanément en bas de l'écran mais qu'il se déplace doucement, on ajoute une transition entre les deux états. from et to définissent les états entre lesquels la transition va être appliquée. Dans ce cas, on veut une transition entre l'état par défaut et down.

Comme on souhaite la même transition dans le cas inverse, lorsque l'état passe de down à l'état par défaut, on définit reversible à true. Ceci est équivalent à l'écriture des deux transitions séparément.

L'élément ParallelAnimation s'assure que les deux types d'animations (le nombre et la couleur) commencent en même temps. On pouvait les démarrer l'un après l'autre en utilisant SequentialAnimation.

Pour plus de détails sur les états et transitions, voir états QML et l'exemple des états et transitions.

[ Précédent : le tutoriel QML, partie 2 : composants QML ]

Remerciements

Merci à Alexandre Laurent pour la traduction, ainsi qu'à Thibaut Cuvelier, Jonathan Courtois et Jacques Thery pour leur relecture !