IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Viadeo Twitter Facebook Share on Google+   
Logo Documentation Qt ·  Page d'accueil  ·  Toutes les classes  ·  Toutes les fonctions  ·  Vues d'ensemble  · 

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.

image

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 !

Cette page est une traduction d'une page de la documentation de Qt, écrite par Nokia Corporation and/or its subsidiary(-ies). Les éventuels problèmes résultant d'une mauvaise traduction ne sont pas imputables à Nokia. Qt 4.7
Copyright © 2021 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon, vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.
Vous avez déniché une erreur, une redirection cassée ou tout autre problème, quel qu'il soit ? Ou bien vous désirez participer à ce projet de traduction ? N'hésitez pas à nous contacter ou par MP !