嵌套的 MouseArea 悬停

Nested MouseArea hover

我遇到嵌套 MouseArea 的问题。 当我单击红色 Rectangle 时,它会触发 Rectangle 顶部的 exited 事件(至少对我而言)。这是有意的行为吗?如果是这样,是否有解决方法?

编辑

澄清
我想要的是能够在单击子项 Rectangle 时将鼠标悬停在顶部 Rectangle 上(顶部 Rectangle 应保持 blue)。如果我想在悬停时隐藏和取消隐藏按钮等,这在 Web 界面中是常见的做法 (HTML/CSS),这很有用。现在这样做会导致奇怪的效果,因为单击由 entered 信号显示的按钮将在您单击它们时消失。

编辑

我用想要的行为做了一个 Javascript 演示: https://jsfiddle.net/uo4vousu/ 即使您单击红色矩形,父级仍保持蓝色,这正是我想要的。在 QML 示例中,父级变为绿色。 我更新了 QML 代码来处理 jsfiddle。

编辑

这可能是 linux 唯一的问题。

这是一个例子:

Rectangle {
    id: top
    width: 100
    height: 32
    anchors.centerIn: parent
    color: "green"

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onExited: top.color = "green"
        onEntered: top.color = "blue"

        Rectangle {
            id: child
            width: 16
            height: 16
            anchors.centerIn: parent
            color: "red"
            MouseArea {
                anchors.fill: parent
                onPressed: child.color="gray"
                onReleased: child.color="red"
            }
        }
    }
}

简单的方法:

Rectangle {
    id: top
    width: 100
    height: 32
    anchors.centerIn: parent
    color: "green"
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onExited: top.color = "green"
        onEntered: top.color = "blue"
        Rectangle {
            width: 16
            height: 16
            anchors.centerIn: parent
            color: "red"
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onExited: top.color = "blue"
                onEntered: top.color = "green"
                onClicked: console.log("Clicked")
            }
        }
    }
}

你可以使用一些数学,

Rectangle {
    id: top
    width: 100
    height: 32
    anchors.centerIn: parent
    signal sgnEnteredZone()
    color: "green"
    onSgnEnteredZone:  {
        top.color = "blue"
    }
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onMouseXChanged:{

            if( (mouseX <inRect.x ||mouseX>inRect.width + inRect.x )
                    && (mouseY <inRect.y ||mouseY>inRect.height + inRect.y)
                    )
                sgnEnteredZone()
            else
                top.color = "green"

        }
        onMouseYChanged:{
            if( (mouseX <inRect.x ||mouseX>inRect.width + inRect.x )
                    && (mouseY <inRect.y ||mouseY>inRect.height + inRect.y)
                    )
                sgnEnteredZone()
            else
                top.color = "green"
        }


        Rectangle {
            id:inRect
            width: 16
            height: 16
            anchors.centerIn: parent
            color: "red"
            MouseArea {
                anchors.fill: parent
                onClicked: console.log("Clicked")
            }
        }
    }
}

我发现只有在使用 Awesome window 管理器时才会出现此问题。我不知道是什么原因造成的,但无论如何我现在都将其标记为已解决。