如何使双MouseArea生效？

Question

以下是我的QML代码：

Rectangle
{
    .....
    Rectangle
    {
        ....height and width is smaller than parent
        MouseArea
        {
            id: mouseArea2
            anchors.fill: parent
            hoverEnabled: true

            onEntered:
            {
                console.log("enter 2")
            }
        }
    }


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

        onEntered:
        {
            console.log("enter 1")
        }
    }
}

只有mouseArea1生效。如果我删除mouseArea1，那么mouseArea2就会生效。所以我认为鼠标事件必须由mouseArea1来处理，让它不能传递给mouseArea2。

我在文档中搜索，找出哪些攻击可以防止这种行为，但什么也没有发现。那么，如何让mouseArea1和mouseArea2同时生效呢？

Answer 1

对于“复合”鼠标事件-- clicked、doubleClicked和pressAndHold --您可以使用propagateComposedEvents属性实现这一点。但这在这里行不通，因为悬停事件不是合成事件。

因此，您需要做的是更改计算MouseAreas的顺序。

一个简单的技巧是交换QML源本身中两个MouseArea的顺序。把小的放在大的后面，小的优先：

Rectangle{
    //.....
    MouseArea{
        id: mouseArea1
        anchors.fill: parent
        hoverEnabled: true

        onEntered:{
            console.log("enter 1")
        }
    }

    Rectangle{
         //....height and width is smaller than parent
        MouseArea{
            id: mouseArea2
            anchors.fill: parent
            hoverEnabled: true

            onEntered:{
                console.log("enter 2")
            }
        }
    }
}

实现相同目标的第二个方法是将一个z索引添加到最顶层的MouseArea中，该索引要大于较低的索引。默认情况下，每个元素的z索引都为0，因此只需将z: 1添加到较小的MouseArea中即可：

Rectangle{
    //.....
    Rectangle{
        //....height and width is smaller than parent
        MouseArea{
            z: 1              // <-----------------
            id: mouseArea2
            anchors.fill: parent
            hoverEnabled: true

            onEntered:{
                console.log("enter 2")
            }
        }
    }

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

        onEntered:{
            console.log("enter 1")
        }
    }
}

Answer 2

我在文档中找到了解决方案。例如，下面的QML代码：

import QtQuick 2.0

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

这里黄色的Rectangle包含一个蓝色的矩形。后者是视觉堆叠顺序层次结构中最顶层的项；它将在前者之上可视化呈现。

由于蓝色Rectangle将propagateComposedEvents设置为true，并将接收到的所有单击事件的MouseEvent::accepted设置为false，因此它收到的任何单击事件都将传播到其下方黄色矩形的MouseArea。

单击蓝色Rectangle将导致调用其子MouseArea的onClicked处理程序；然后将该事件传播到黄色Rectangle的MouseArea，从而调用其自己的onClicked处理程序。