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;//表示鼠標事件到此處理為止了，不再往下傳