Provides a surface that can be flipped. 更多...
导入语句: | import QtQuick 2.2 |
继承: | Item |
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.
front and back properties are used to hold the items that are shown respectively on the front and back sides of the flipable item.
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
的
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 } }
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.
见 Qt Quick 状态 for details on state changes and the default state, and Qt Quick 中的动画和过渡 for more information on how animations work within transitions.
另请参阅 UI 组件:可翻转范例 .
back : Item |
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
.