Flipable属性说明

继承自 Item

Flipable是一个可以在其正面和背面之间“翻转”的项目，就像一张卡片。它可以与旋转，状态和转换类型一起使用，以产生翻转效果。

本文: https://www.lovejia.win/blog/article/Flipable.html
参考原文：http://doc.qt.io/qt-5/qml-qtquick-flipable.html
参考译文：http://blog.csdn.net/vampire_armand/article/details/39156545

属性说明

back : Item

后面的翻转。

front : Item

前面的翻转。

side : enumeration

Flipable当前可见的面，属性值为Flipable.Front或Flipable.Back。

功能简述

Flipable是一个可以在其正面和背面之间“翻转”的项目，就像一张卡片。它可以与旋转，状态和转换类型一起使用，以产生翻转效果。
front和back属性分别保存Flipable的正面和背面。

例

以下示例显示了Flipable项目，该项目在单击时围绕y轴旋转：

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
    }
}

这个可翻转项目有一个flipped布尔属性，只要clickable中的MouseArea被切换。当flipped为true时，项目更改为“后退”状态; 在这种状态下，angle所述的旋转项被改变为180度以产生翻转效果。当flipped为false时，项目将恢复为默认状态，其中angle值为0。
该过渡创建，改变了4秒角动画。当项目在其“后退”和默认状态之间改变时，NumberAnimation动画化它的旧值和新值之间的角度。