Qt Reference Documentation

QML Flipable Element

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

Inherits Item

  • List of all members, including inherited members
  • Properties

    Detailed Description

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

    Here is a Flipable that flips whenever it is clicked:

     import Qt 4.7
     Flipable {
         id: flipable
         width: 240
         height: 240
         property int angle: 0
         property bool flipped: false
         front: Image { source: "front.png" }
         back: Image { source: "back.png" }
         transform: Rotation {
             origin.x: flipable.width/2; origin.y: flipable.height/2
             axis.x: 0; axis.y: 1; axis.z: 0     // rotate around y-axis
             angle: flipable.angle
         states: State {
             name: "back"
             PropertyChanges { target: flipable; angle: 180 }
             when: flipable.flipped
         transitions: Transition {
             NumberAnimation { properties: "angle"; duration: 1000 }
         MouseArea {
             anchors.fill: parent
             onClicked: flipable.flipped = !flipable.flipped

    The Rotation element is used to specify the angle and axis of the flip, and the State defines the changes in angle which produce the flipping effect. Finally, the Transition creates the animation that changes the angle over one second.

    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 Flippable currently visible. Possible values are Flippable.Front and Flippable.Back.


    Thank you for giving your feedback.

    Make sure it is related to this specific page. For more general bugs and requests, please use the Qt Bug Tracker.