可翻转的QML类型

提供了一种可以翻转的表面。更多信息...

导入说明	import QtQuick
继承	Item

所有成员列表，包括继承的成员

属性

back : Item
front : Item
side : 枚举

详细描述

Flipable是一个可以清晰“翻转”的项，其正面和背面，类似于卡片。可以与Rotation、State和Transition类型一起使用，以产生翻转效果。

属性front和back用于报告在可翻转项的正面和反面分别显示的项。

示例用法

下面的例子显示了每当点击时就会翻转的Flipable项，它围绕y轴旋转。

此可翻转项有一个flipped布尔属性，在可翻转内部MouseArea被点击时切换。当flipped为true时，项切换到“背面”状态；在这个状态下，Rotation项的angle改为180度以产生翻转效果。当flipped为false时，项恢复到默认状态，其中angle的值是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
    }
}

Transition创建了在四秒钟内改变角度的动画。当项在其“背面”和默认状态之间切换时，NumberAnimation将角度从旧值动画到新值。

请参阅Qt Quick States以获取有关状态更改和默认状态的详细信息，以及Qt Quick中的动画和过渡以获取有关如何在过渡中执行动画的更多信息。

另请参阅UI组件：可翻转示例。

属性文档

back : Item

front : Item

可翻转的正面和背面。

side : 枚举 [只读]

当前可见的Flipable侧面。可能的值有Flipable.Front和Flipable.Back。