Flipable QML Type | Qt Quick 5.9

Qt 5.9 | Qt Quick | QML Types | Flipable QML Type

Qt 5.9.4 Reference Documentation

# Flipable QML Type

Provides a surface that can be flipped More...

Import Statement: | import QtQuick 2.7
Inherits: | Item

- List of all members, including inherited members

## Properties

- back : Item
- front : Item
- side : enumeration

## Detailed Description

Flipable is an item that can be visibly "flipped" between its front and back sides, like a card. It may used together with Rotation, State and Transition types 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 2.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 Qt Quick States for details on state changes and the default state, and Animation and Transitions in Qt Quick for more information on how animations work within transitions.

See also UI Components: Flipable Example.

## Property Documentation

back : Item

The front and back sides of the flipable.

front : Item

The front and back sides of the flipable.

side : enumeration

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