如何使双 MouseArea 生效？答案

【问题标题】：How to make double MouseArea take effect?如何使双 MouseArea 生效？
【发布时间】：2015-10-18 09:36:53
【问题描述】：

这是我的 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同时生效呢？

【问题讨论】：

标签： qt qml qtquick2 qt5.5

【解决方案1】：

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

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

一个简单的技巧是在 QML 源代码中交换两个 MouseAreas 的顺序。通过将较小的放在较大的之后，较小的优先：

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，该索引大于较低的索引。默认情况下，每个元素都有一个0 的z 索引，因此只需将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")
        }
    }
}

【讨论】：

【解决方案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 处理程序。

【讨论】：