Question

这可能是一个错误，但请继续阅读：

在下面的代码中，当可翻转翻转时，可翻转前面的鼠标区保持活动状态（但是反转），甚至从背面接管一些鼠标区域：

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

启用前后元素或者为我解决了这个问题：

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

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

Answer 2

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

我评论了这一行：

preventStealing: true // doesnt work with my QtQuick 1.0

并且行为正确。

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

Flipable和MouseArea的组合在qml中出错了

2 个答案: