嵌套 MouseArea 悬停

Posted 2023-02-16

【中文标题】嵌套 MouseArea 悬停

【英文标题】：Nested MouseArea hover

【发布时间】：2015-08-07 17:50:17

【问题描述】：

我遇到了嵌套 MouseAreas 的问题。 当我点击红色的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"
            
        
    

【参考方案1】：

简单的方法：

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")
            
        
    

【讨论】：

以上都没有真正解决问题，我很抱歉没有说明我真正想要发生的事情，我编辑了我的问题以澄清问题。

我明白，我没有这种行为，它发送退出信号不是逻辑，我在 Windows 上使用 Qt 5.5.0

我明白了，谢谢。那么这可能是一个 linux 问题，因为我正在使用 Arch linux。稍后将在 Windows 上尝试此操作以确认。

【参考方案2】：

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