Flipable QML Type
提供可翻转的表面。更多
Import Statement: | import QtQuick |
Inherits: |
属性
详细说明
Flipable 是一种可以像卡片一样在正反面之间明显 "翻转 "的物品。它可与Rotation 、State 和Transition 类型一起使用,以产生翻转效果。
front 和back 属性用于保存分别显示在可翻转项目正反面的项目。
使用示例
下面的示例显示了一个 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 组件:可翻转示例。
属性文档
side : enumeration |
Flipable 当前可见的一面。可能的值是Flipable.Front
和Flipable.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.