Question

如何从我放在Flipable项目正面和背面的矩形中获取MouseAreas工作？

每当我点击Flipable项目时，它会翻转，但是当我点击时在图像上应该做其他事情，而不是翻转，它再次翻转。

因此，我需要在图像上点击它们时使这些MouseAreas在图像中工作，而不是像现在那样翻转项目。

这是我的代码，非常感谢任何帮助。

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

您的代码中的所有MouseArea大致处于同一层级，因此接收点击的那个是不明确的[*]。

您可以通过动态更改应捕获鼠标事件的项目的z顺序来解决此问题：

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

_{[*]：实际上，最后MouseArea是＆＃34;绘制的＆＃34;高于其他人，因为它根据rules in the documentation显示在代码的最后。但前面的项目似乎也是逻辑上的＆＃34;绘制＆＃34;在后面项目上方，即使它不可见，因此，当翻转边时，必须调整z属性。}

Answer 2

在翻转之前检查Flipable's side property的值。解决文档中的示例：

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

MouseAreas在QML中重叠

2 个答案: