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 !