Flipable QML Type
Provides a surface that can be flipped. More...
Import Statement: | import QtQuick |
Inherits: |
Properties
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 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
side : enumeration |
The side of the Flipable currently visible. Possible values are Flipable.Front
and Flipable.Back
.
© 2024 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.