QML:可翻转的问题

时间:2012-11-06 12:33:03

标签: qt qml transitions flip qt-quick

我正试图在QML中制作一个可翻转的时钟。 但是我无法按照需要获得可翻转的效果,我已经提到了翻转方法的文档,将其作为进一步开发的基础。

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

以下是推荐的文档代码段

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
     }
 }

1 个答案:

答案 0 :(得分: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
  }
}

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