QML：可翻转问题答案

【问题标题】：QML : Flippable issueQML：可翻转问题
【发布时间】：2012-10-26 09:55:09
【问题描述】：

我正在尝试在 QML 中制作一个可翻转的时钟。但是无法获得想要的可翻转效果，我参考了翻转方法的文档，以此作为进一步开发的基础。

尝试了各种方法，但都没有成功。知道如何获得这种效果。

以下是参考文档代码sn-p

import QtQuick 1.0

 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: 1; axis.y: 0; axis.z: 0     // set axis.x 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
     }
 }

【问题讨论】：

我不会回答你的问题。我要问你。你能检查我的问题stackoverflow.com/questions/13217380/how-to-flip-an-image-in-qt 我需要知道如何将可翻转添加到 QMainWindow。提前致谢
如果您提供的所有信息都是“我无法使其工作”，然后从官方文档中复制粘贴一个工作示例，您认为任何人都可以帮助您吗？问题出在您的代码，而不是示例。
我明白了，但是实现有点大，贴在这里..所以我尝试在小型POC中产生这种效果，所以我选择了官方文档，我尝试通过X轴翻转如上图，它的翻转，但我只希望图像的一半翻转而不是整个图像。

标签： qt qml transitions flip qt-quick

【解决方案1】：

你不能只翻转一个项目的一半。要模拟翻转时钟，您必须使用图像的两个克隆。

尝试在上面的代码末尾添加：

Item {
  anchors {top: flipable.top; horizontalCenter: flipable.horizontalCenter}
  width: flipable.width
  height: flipable.height / 2
  z: flipable.z + 1

  clip: true

  Image {
    source: "front.png";
    anchors.centerIn: parent
  }
}

显然，这段代码不是解决方案，它只是提示您必须为完整的解决方案做什么。

【讨论】：