Flipable QML Type

提供可翻转的表面。更多

Import Statement: import QtQuick
Inherits:

Item

属性

详细说明

Flipable 是一种可以像卡片一样在正反面之间明显 "翻转 "的物品。它可与RotationStateTransition 类型一起使用,以产生翻转效果。

frontback 属性用于保存分别显示在可翻转项目正反面的项目。

使用示例

下面的示例显示了一个 Flipable 项目,只要点击该项目就会翻转,并围绕 Y 轴旋转。

该可翻转项有一个flipped 布尔值属性,每当点击可翻转项中的MouseArea 时,该属性就会切换。当flipped 为真时,该项目将变为 "后退 "状态;在此状态下,Rotation 项目的angle 将变为 180 度,以产生翻转效果。当flipped 为假时,项目会恢复到默认状态,此时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 状态,有关动画如何在转场中起作用的详细信息,请参阅 Qt Quick 中的动画和转场

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

属性文档

back : Item

front : Item

Flipable 的正面和背面。


side : enumeration [read-only]

Flipable 当前可见的一面。可能的值是Flipable.FrontFlipable.Back


© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.