qml-MouseArea重叠穿透

背景：重叠区域鼠标穿透。比如桌面是大矩形，程序图标是小矩形。这时候就产生了mouseArea的重叠。我们希望点击重叠区域时，只有小矩形发生应答，当点击小矩形之外的区域时大矩形才响应

如下代码：

Rectangle {
        color: "yellow"
        width: 100; height: 100

        MouseArea {
            anchors.fill: parent
            onClicked: console.log("clicked yellow")
        }

        Rectangle {
            color: "blue"
            width: 50; height: 50

            MouseArea {
                anchors.fill: parent
                propagateComposedEvents: true
                onClicked: {
                    console.log("clicked blue")
                    mouse.accepted = false
                }
            }
        }
    }

 

 

 

当点击蓝色矩形时我们希望打印"clicked blue"，当点击除蓝色之外的黄色区域时，我们期望打印"clicked yelow"。实际上呢？

 

 

点击蓝色矩形时，黄色和蓝色同时响应了，这并不是我们想要的结果。修改如下代码：

 

 

运行结果：

 

 

 

ok，现在我们总结下发生鼠标重叠时，要想穿透(传递)时的做法：

1、设置上层鼠标 propagateComposedEvents: true

2、设置上层鼠标mouse.accepted = true;//表示鼠标事件到此处理为止了，不再往下传