QtQuick 2.0 中的重叠鼠标区域答案

【问题标题】：Overlapping mouseareas in QtQuick 2.0QtQuick 2.0 中的重叠鼠标区域
【发布时间】：2014-10-06 06:34:10
【问题描述】：

我有 QML 2.0 中的项目列表，我想仅当鼠标位于黑色 mouseArea 内时才显示项目的上下文菜单（图片中的红色框）。上下文菜单包含几个按钮，每个按钮都有自己的 museArea。在 QtQuick 1.0 中，它按预期工作，但在 2.0 中却没有。当我在红色小框（上下文菜单项）之间移动光标时，会调用黑色 MouseArea::onExited（并且未显示上下文菜单）。它看起来像小的红色鼠标区域覆盖了较大的黑色鼠标区域。如果我设置：

z: 10

在黑色 mouseArea 中，当光标位于红色小框上方时不会调用 onExited，但我不能使用小型鼠标悬停效果。当光标位于红色框上方时，我应该怎么做才能访问小红框的鼠标区域并同时不调用黑色 mouseArea::onExited？

【问题讨论】：

您应该添加尽可能短（仍然完整且有效）的 QML 代码来重现问题。

标签： qt qml

【解决方案1】：

您可以启用悬停并检查 containsMouse 属性，而不是依赖于 mouseArea onExited 和 onEntered 事件。这是一个工作示例（QtQuick 2.0）：

Column
{
    spacing: 10
    Repeater
    {
        model:4
        Rectangle
        {
            height: 100
            width: parent.width
            border.color: "black"

            MouseArea
            {
                id: mouseArea
                anchors.fill: parent
                hoverEnabled: true
            }

            Rectangle
            {
                visible: mouseArea.containsMouse
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.margins: 20
                width: 200
                border.color: "red"

                Rectangle
                {
                    anchors.centerIn: parent
                    color: "purple"
                    width: 20
                    height: 20
                    MouseArea
                    {
                        anchors.fill: parent
                        onClicked: print("clicked")
                    }
                }
            }



        }
    }
}

【讨论】：

【解决方案2】：

如果MouseArea 与其他MouseArea 项目的区域重叠，您可以选择传播clicked、doubleClicked 和 pressAndHold 事件通过设置这些其他项目 propagateComposedEvents 到 true 并拒绝应该被传播。请参阅propagateComposedEvents 文档了解详情。

Source

【讨论】：