Question

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

的代码段

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悬停事件向下传播到ToolButtons中的layout。我不明白为什么。因此，onEntered和onExited事件无法正常工作，因为当onExited ＆＃39; MouseArea时ToolButtons内发生了MouseArea悬停＆＃39; 并显示工具提示。最后，我需要Rectangle比其父onExited更宽更长，这样一旦发出menu，Rectangle就会变得不可见。使用{{1}}进行测试成功后，生成C ++类型的Polygon是有意义的。

Answer 1

在您的示例中，onExited必须在输入ToolButton时发出。根据{{3}}：

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
    }
}

将鼠标从mouseArea2移至mouseArea1将导致mouseArea1发出已退出的信号。

如果您不希望发出exited信号，

如果您将两个MouseAreas设为父子关系，则将鼠标从mouseArea2移至mouseArea1将不会导致mouseArea1退出。相反，他们都被认为是同时徘徊。

也就是说，将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 {}
                }
            }
        }
    }
}

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

1 个答案: