如何处理重叠 Mousareas 中的按下和释放信号？

Question

我想在两个重叠的鼠标区域中处理按下和释放的信号。

我的情况简要说明如下：

我有两个鼠标区域 M1 和 M2。 M1 包含在一个矩形中，用作一个按钮。它具有固定的尺寸，例如 100x100。 M2填满了整个屏幕，尺寸肯定比M1大。我可以任意设置 M1 和 M2 的 z 属性。我需要处理这两个鼠标区域中的按下和释放信号。

在 QtQuick 中是否可以？如果可以，如何实现？

import QtQuick 2.5
Item {
    visible: true
    width:1280
    height:720

    Rectangle {
        color: "blue"
        width: 100; height: 100
        z:1
        MouseArea {
            id:m1
            anchors.fill: parent
            onPressed : {
                mouse.accepted = false
                console.log("pressed m1")
            }
            onReleased: {
                console.log("released m1")
            }
        }
    }

    MouseArea {
        id: m2
        anchors.fill: parent
        onPressed : {
            console.log("pressed m2")
        }
        onReleased: {
            console.log("released m2")
        }
    }
}

我想在按下和释放 m1 时同时按下和释放鼠标区域。

（Qt 5.5 版）

Answer 1

在第一个答案中的 cmets 之后。这是怎么回事：

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true
    width:1280
    height:720

    Rectangle {
        color: "blue"
        width: 100; height: 100
        z:1
        MouseArea {
            id:m1
            anchors.fill: parent
            propagateComposedEvents: true
            onPressed : {
                mouse.accepted = false
                console.log("pressed m1")
            }
            onReleased: {
                console.log("released m1")

            }
        }
    }

    MouseArea {
        id: m2
        anchors.fill: parent
        onPressed : {
            console.log("pressed m2")
        }
        onReleased: {
            console.log("released m2")
            m1.released(mouse);
        }
    }
}

这会打印出您想要的内容。

Answer 2

首先，ids 不能以大写字母开头，所以你的MouseAreas 不能是M1 和M2。相反，它们必须是 m1 和 m2。

import QtQuick 2.3

Rectangle {
    id: root
    width: 400
    height: 300

    Rectangle {
        id: m1Container
        width: 100
        height: 100
        color: "blue"
        z: 1

        MouseArea {
            id: m1
            anchors.fill: parent
            hoverEnabled: true

            onPressed: {
                mouse.accepted = false
                console.log("m1 pressed")
            }
            onReleased: {
                console.log("m1 released")
            }
        }
    }

    MouseArea {
        id: m2
        anchors.fill: parent

        onPressed: {
            console.log("m2 pressed")
        }
        onReleased: {
            console.log("m2 released")
            if(m1.containsMouse) {
                m1.released(mouse)
            }
        }
    }
}

编辑：我从 sk2212 的答案中借用了m1.released(mouse) 的想法，并稍作调整以处理鼠标在m1 之外并被按下和释放的情况。