组合的Flipable和鼠标区域脚麻在QML

Question

可能可以，这是一个错误，但请往下看：在下面的代码

，在flipable前面的鼠标区域保持活跃时flipable翻转（但相反的），甚至接管一些鼠标区域从背面：

import QtQuick 2.0 

Rectangle { 
    height: 500 
    width: 500 

    Flipable { 
     id: flipable 

     anchors.fill:parent 

     property bool flipped: false 

     front: Rectangle{ 
      color: "black" 
      anchors.fill: parent 

      Rectangle { 
       color:"darkgrey" 
       height: parent.height/2 
       width: parent.width/2 

       MouseArea { 
        anchors.fill: parent 
        onClicked: flipable.flip() 
       } 
      } 
     } 
     back: Rectangle { 
      id: yellow 
      color: "yellow" 
      anchors.fill: parent 

      MouseArea { 
       anchors.fill: parent 
       onClicked: yellow.color = "green" 
      } 
     } 

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

     function flip() { 
      flipped = !flipped 
     } 
    } 
} 

当你按下灰色区域的页面翻转，如果再次按下它（现在是右边后面）再次翻转。正确的行为是黄色方块变成绿色，即使点击右上角。

谢谢！

Answer 1

正确的行为是黄色正方形变为绿色，即使在右上角单击时也是如此，即 。

我评论这行：

preventStealing: true // doesnt work with my QtQuick 1.0 

，它是行为的正确方法。

你为什么把它放在第一位？

Answer 2

启用正面和背面的元素或者解决了这个问题对我来说：

front: Rectangle { 
    enabled: !parent.flipped 
    ... 
} 

back: Rectangle { 
    enabled: parent.flipped 
    ... 
}