鼠标进入内部MouseArea时外部MouseArea的containsMouse状态丢失问题

当父容器包含带MouseArea的子组件时，鼠标进入子组件区域后，父容器MouseArea的containsMouse会变为false——这是因为子MouseArea启用hover后会抢占事件，导致父MouseArea认为鼠标已离开自身范围。

解决方案 #

不依赖父容器MouseArea的containsMouse，直接使用父Item自带的containsMouse属性。该属性基于几何范围判断：只要鼠标处于父Item或其任何可见子项的边界内，就会返回true，不受子元素事件捕获的影响。

修改后的代码示例 #

import QtQuick 2.7
import QtQuick.Controls 2.3

Rectangle {
    id: outerItem
    width: 200
    height: 200
    color: "blue"

    // 监听父Item的containsMouse变化，实现hover检测
    onContainsMouseChanged: {
        if (containsMouse) {
            console.log("Mouse entered blue item")
        } else {
            console.log("Mouse left blue item")
        }
    }

    Rectangle {
        color: "red"
        width: 100
        height: 100

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            propagateComposedEvents: true

            onContainsMouseChanged: {
                if (containsMouse) {
                    console.log("Mouse entered red item")
                } else {
                    console.log("Mouse left red item")
                }
            }
        }
    }
}

保留父容器MouseArea的场景 #

如果父容器需要处理点击等其他事件，可以保留MouseArea，但仍用父Item的containsMouse来判断hover状态：

import QtQuick 2.7
import QtQuick.Controls 2.3

Rectangle {
    id: outerItem
    width: 200
    height: 200
    color: "blue"

    MouseArea {
        anchors.fill: parent
        // 保留MouseArea处理点击事件
        onClicked: console.log("Blue item clicked")
    }

    // 仍通过父Item检测hover状态
    onContainsMouseChanged: {
        if (containsMouse) {
            console.log("Mouse entered blue item")
        } else {
            console.log("Mouse left blue item")
        }
    }

    Rectangle {
        color: "red"
        width: 100
        height: 100

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            propagateComposedEvents: true

            onContainsMouseChanged: {
                if (containsMouse) {
                    console.log("Mouse entered red item")
                } else {
                    console.log("Mouse left red item")
                }
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Michał Walenciak