Qt官方示例：UI Components: Flipable Example

这是一个简单的例子，主要演示 Flipable 类型的用法。

卡片的定义：

import QtQuick

Flipable
{
    id: container

    property alias source: frontImage.source
    property bool flipped: true //状态：是否翻转
    property int xAxis: 0
    property int yAxis: 0
    property int angle: 0    //旋转角度

    width: front.width; height: front.height

    front: Image { id: frontImage }
    back: Image { source: "back.png" }

    state: "back"

    MouseArea
    {
        anchors.fill: parent;
        onClicked: container.flipped = !container.flipped
    }

    transform: Rotation
    {
        id: rotation; origin.x: container.width / 2; origin.y: container.height / 2
        axis.x: container.xAxis; axis.y: container.yAxis; axis.z: 0
    }

    states: State
    {
        name: "back"; when: container.flipped //翻转状态变化时触发状态改变
        PropertyChanges
        {
            rotation.angle: container.angle
        }
    }

    transitions: Transition
    {
        ParallelAnimation //并行动画
        {
            NumberAnimation { target: rotation; properties: "angle"; duration: 600 }//角度的变化持续0.6秒
            SequentialAnimation //串行动画，先缩小到0.75倍的尺寸再恢复原状
            {
                NumberAnimation { target: container; property: "scale"; to: 0.75; duration: 300 }
                NumberAnimation { target: container; property: "scale"; to: 1.0; duration: 300 }
            }
        }
    }
}

简单的代码，加上注释也没几行。

开头定义几个自定义属性，方便用户从外部配置：

    property alias source: frontImage.source
    property bool flipped: true //状态：是否翻转
    property int xAxis: 0
    property int yAxis: 0
    property int angle: 0    //旋转角度

沿着x、y轴旋转的角度默认都是0，要配置沿着x轴旋转设置xAxis为1，要配置沿着y轴旋转则设置yAxis为1。

这里设置了左边的卡片沿y轴旋转，右边的卡片沿着x轴旋转：

import QtQuick

Rectangle {
    id: window

    width: 480; height: 320
    color: "darkgreen"

    Row {
        anchors.centerIn: parent; spacing: 30
        Card { source: "9_club.png"; angle: 180; yAxis: 1 }
        Card { source: "5_heart.png"; angle: 540; xAxis: 1 }
    }
}

按下鼠标时 flipped 变化，从而触发状态改变，状态改变从而转换动画激活。