14. QML使用Flipable实现卡片翻转效果

1.说明

在QML中提供了一个控件Flipable，这个控件提供了两个属性，一个是front，另一个是back，分别用于展现正面和反面的界面状态，在实际中可以对这两个属性进行单独样式的设计，这样就可以实现在一个控件上的正反面设计不同的效果，同时结合动画更改控件的翻转角度，即可交替展现控件的正反面。
效果展示：

flipable控件效果

2. 主要代码

import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 2.0
import QtQuick.Dialogs 1.1

ApplicationWindow {
    id:root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    
    Flipable {
        id: flipable
        width: 240
        height: 300
        anchors.centerIn: parent
        property bool flipped : false
        front: Rectangle {
            anchors.fill: parent;
            gradient: Gradient {
                GradientStop { position: 0.0; color: "lightsteelblue" }
                GradientStop { position: 1.0; color: "blue" }
            }
            Text {
                anchors.centerIn: parent
                text: "front page..."
                font.pointSize: 20
            }
        }
        back: Rectangle {
            anchors.fill: parent;
            gradient: Gradient {
                GradientStop { position: 0.0; color: "red" }
                GradientStop { position: 1.0; color: "blue" }
            }
            Text {
                anchors.centerIn: parent
                text: "back page..."
                font.pointSize: 20
            }
        }
        transform: Rotation {
            id:rotation
            origin.x: flipable.width / 2
            origin.y: flipable.height / 2
            axis.x: 0
            axis.y: 1
            axis.z: 0
            angle: 0
        }
        states: [
            State {
                name: "back"
                when: flipable.flipped
                PropertyChanges {
                    target: rotation
                    angle: 180
                }
            }
        ]
        transitions: Transition {
            NumberAnimation {
                target: rotation
                properties: "angle"
                duration: 500
            }
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                flipable.flipped =!flipable.flipped
            }
        }
    }
}