首页 文章

嵌套的MouseArea悬停

提问于
浏览 次
0

我遇到嵌套 MouseArea 的问题 . 当我点击红色 Rectangle 时，它会触发顶部 Rectangle 上的 exited 事件（至少对我而言） . 这是预期的行为吗？如果是这样，有解决方法吗？

编辑

澄清
我想要的是能够在点击孩子 Rectangle 时保持顶部 Rectangle 的悬停（顶部 Rectangle 应保持 blue ） . 如果我想在悬停时隐藏和取消隐藏按钮等，这很有用，这在Web界面（HTML / CSS）中很常见 . 现在执行此操作会产生奇怪的效果，因为单击 entered 信号显示的按钮将在您单击时消失 .

编辑

我用想要的行为进行了Javascript演示：https://jsfiddle.net/uo4vousu/即使你单击红色矩形，父级也会保持蓝色，这就是我想要的 . 在QML示例中，父级变为绿色 . 我将QML代码更新为machs 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"
            }
        }
    }
}
qt qml qtquick2 archlinux qt5.5

2 回答

  • 0

    简单的方法：

    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")
            }
        }
    }
}
    回复于
  • 1

    我发现只有在使用Awesome窗口管理器时才会出现此问题 . 我不知道是什么原因引起的，但我现在仍然认为这已经解决了 .

    回复于

相关问题