首页 文章

MouseArea事件将传播到其父级兄弟 . 为什么？

提问于
浏览 次
0

这是一个包含当前代码形式的代码段

Rectangle
{
    id: menu
    GridLayout
    {
        id: layout
        columns: 4
        rows: 3

        Repeater
        {
            model: ListModel {}
            ToolButton {}
        }
        Rectangle
        {
        x: -3
        y: -33
        width: menu.width - 2
        height: menu.height + 33
        border.color: "red"
        border.width: 3
        color: "blue"
        MouseArea
        {
            x: mapToItem(menu, -5, -35).x
            y: mapToItem(menu, -5, -35).y
            width: menu.width
            height: menu.height + 35
            hoverEnabled: true
            preventStealing: true
            onEntered:console.log("onEntered")
            onExited:console.log("onExited menu mous area")
        }
        }
    }
}

MouseArea 悬停事件向下传播到 layout 中的 ToolButtons . 我不明白为什么 . 因此， onEntered 和 onExited 事件不能按预期工作，因为 onExited 发生在 MouseArea 内 ToolButtons 'hovered' 并显示工具提示 . 最后，我需要 MouseArea 比它的父 Rectangle 更宽更长，这样一旦发出 onExited ，_2817862就会变得不可见 . 用 Rectangle 测试成功后，制作C型多边形是有意义的 .

qt qml qt-quick qtquick2

1 回答

  • 0

    在您的示例中， onExited 必须在输入 ToolButton 时发出 . 根据MouseArea.exited()：

    Rectangle {
    width: 400; height: 400
    MouseArea {
        id: mouseArea1
        anchors.fill: parent
        hoverEnabled: true
    }
    MouseArea {
        id: mouseArea2
        width: 100; height: 100
        anchors.centerIn: parent
        hoverEnabled: true
    }
}

    将鼠标从mouseArea1移动到mouseArea2将导致mouseArea1发出退出的信号 .

    如果您不想发出 exited 信号，

    如果你给两个MouseAreas一个父子关系，那么从mouseArea1将鼠标移动到mouseArea2将不会导致mouseArea1发出exited . 相反，他们都被认为是同时徘徊 .

    也就是说，将 ToolButton （和所有相关组件）放在 MouseArea 中 . 例如，

    Rectangle {
    id: menu

    Rectangle {
        //some properties
        MouseArea {
            hoverEnabled: true
            //some properties

            onEntered:console.log("onEntered")
            onExited:console.log("onExited menu mous area")

            GridLayout {
                id: layout
                Repeater {
                    ToolButton {}
                }
            }
        }
    }
}
    回复于

相关问题