QML中的MouseAreas重叠

Question

How can I get MouseAreas, from rectangles that I've put on front and back of Flipable item, work?

Whenever I click Flipable item, it flips, but when I click on image that's supposed to do other thing, not flip, it flips again.

So, I need to get these MouseAreas in Images work when it's clicked on them, and not to flip item as it does now.

Here is my code, any help would be very appreciated.

import QtQuick 2.0

Item {
    x: 400
    Flipable {
        id: flipable
        width: 400
        height: 500
        property bool flipped: false

        front: Rectangle {
            id: page1
            width: 400
            height: 500
            color: "transparent"
            Image //this is the background of Flipable front
            {
                id: bookright
                source: "r.png"
            }
            Image //this is image that works like button
            {
                x: 30
                y: 130
                id: front
                source: "BTest.png"

                MouseArea {
                    anchors.fill: front
                    onClicked: {
                        Logic.onClicked(2)
                    }
                }
            }
        }

        back: Rectangle {
            id: page2
            width: 400
            height: 500
            color: "transparent"

            Image {
                id: bookleft
                source: "l.png"
            }
            Image {
                x: 30
                y: 130
                id: back
                source: "Zucenje.png"

                MouseArea {
                    anchors.fill: back
                    onClicked: {
                        Logic.onClicked(3)
                    }
                }
            }
        }

        transform: Rotation {
            id: rotation
            origin.x: 0
            origin.y: 0
            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: 2000
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: flipable.flipped = !flipable.flipped
        }
    }
}

Answer 1

All the MouseArea s in your code are roughly at the same hierarchical level, so the one which will receive the clicks is ambiguous [*].

You can solve this by dynamically changing the z-order of the item which should catch the mouse events:

front: Rectangle {
    z: flipable.flipped ? -1 : 1  // on top when not flipped
...
back: Rectangle {
    z: flipable.flipped ? 1 : -1  // on top when flipped

_{[*]: Actually, the last MouseArea is "drawn" above the others because it appears last in the code according to the rules in the documentation . But the front item also seems to be logically "drawn" above the back item even when it is not visible, so, the z property has to be adjusted when sides are flipped.}

Answer 2

Check the value of Flipable's side property before flipping it. Working off the example from the documentation:

import QtQuick 2.0

Flipable {
    id: flipable
    width: 240
    height: 240

    property bool flipped: false

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

        Text {
            text: "Front"
            anchors.centerIn: parent
        }
    }

    back: Rectangle {
        color: "blue"
        anchors.fill: parent

        Text {
            text: "Back"
            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
        angle: 0
    }

    states: State {
        name: "back"
        PropertyChanges {
            target: rotation;
            angle: 180
        }
        when: flipable.flipped
    }

    transitions: Transition {
        NumberAnimation {
            target: rotation;
            property: "angle";
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (flipable.side == Flipable.Front)
                flipable.flipped = true
        }
    }
}