qt - 如何让double 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。

我搜索文档以找出哪个 attr 可以防止此类行为，但没有找到。那么如何让mouseArea1和mouseArea2同时生效呢？

Answer 1

对于“复合”鼠标事件——clicked、doubleClicked 和pressAndHold——您可以使用 propagateComposedEvents 实现此目的属性(property)。但这在这里行不通，因为悬停事件不是组合事件。

因此，您需要做的是更改评估 MouseArea 的顺序。

一个简单的技巧是交换 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")
        }
    }
}