Viadeo Twitter Google Bookmarks ! Facebook Digg del.icio.us MySpace Yahoo MyWeb Blinklist Netvouz Reddit Simpy StumbleUpon Bookmarks Windows Live Favorites 
Logo Documentation Qt ·  Page d'accueil  ·  Toutes les classes  ·  Toutes les fonctions  ·  Vues d'ensemble  · 

QML Flipable Element

The Flipable item provides a surface that can be flipped. More...

Inherits Item

This element was introduced in Qt 4.7.

Properties

Detailed Description

Flipable is an item that can be visibly "flipped" between its front and back sides, like a card. It is used together with Rotation, State and Transition elements to produce a flipping effect.

The front and back properties are used to hold the items that are shown respectively on the front and back sides of the flipable item.

Example Usage

The following example shows a Flipable item that flips whenever it is clicked, rotating about the y-axis.

This flipable item has a flipped boolean property that is toggled whenever the MouseArea within the flipable is clicked. When flipped is true, the item changes to the "back" state; in this state, the angle of the Rotation item is changed to 180 degrees to produce the flipping effect. When flipped is false, the item reverts to the default state, in which the angle value is 0.

 import QtQuick 1.0

 Flipable {
     id: flipable
     width: 240
     height: 240

     property bool flipped: false

     front: Image { source: "front.png"; anchors.centerIn: parent }
     back: Image { source: "back.png"; anchors.centerIn: parent }

     transform: Rotation {
         id: rotation
         origin.x: flipable.width/2
         origin.y: flipable.height/2
         axis.x: 0; axis.y: 1; axis.z: 0     // set axis.y to 1 to rotate around y-axis
         angle: 0    // the default angle
     }

     states: State {
         name: "back"
         PropertyChanges { target: rotation; angle: 180 }
         when: flipable.flipped
     }

     transitions: Transition {
         NumberAnimation { target: rotation; property: "angle"; duration: 4000 }
     }

     MouseArea {
         anchors.fill: parent
         onClicked: flipable.flipped = !flipable.flipped
     }
 }

The Transition creates the animation that changes the angle over four seconds. When the item changes between its "back" and default states, the NumberAnimation animates the angle between its old and new values.

See QML States for details on state changes and the default state, and QML Animation and Transitions for more information on how animations work within transitions.

See also Flipable example.

Property Documentation

front : Item

back : Item

The front and back sides of the flipable.


read-onlyside : enumeration

The side of the Flipable currently visible. Possible values are Flipable.Front and Flipable.Back.


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.8
Copyright © 2012 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 ? Un bug ? 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 !
 
 
 
 
Partenaires

Hébergement Web