QML：mousearea重叠的问题

我有一个QML应用程序和MouseAreas的问题

在一个小的测试应用程序中，有一个红色的矩形，当鼠标进入该矩形时，下面会出现一个灰色菜单（使用加载程序创建）

当鼠标位于红色矩形或菜单上时，此灰色菜单必须打开。为此，我有两个鼠标区域，一个在红色矩形上，一个在菜单上。 两者都是“hoverEnabled”，并带有“enter”和“exit”I控件“hoverDialog”和“hoverTopZone”

如果两者都为false，则表示鼠标已退出，因此我关闭菜单（使用信号，加载程序将处于非活动状态）

计时器是必需的，因为当从“mouseAreaTopZone”传递到“MouseAreatAlog”时，只需片刻，“hoverDialog”和“hoverTopZone”均为false。 固定的计时器

在菜单的中间有一个绿色的矩形，并且（仅）当鼠标在那里时，黄色的矩形必须可见

这是我的问题。我在绿色矩形内有一个鼠标区域，但在需要时黄色矩形不可见

如果我将“rectGreen”移动到“mouseAreaTopZone”和“mouseareadalog”下面（即文件末尾），当鼠标位于绿色rect上时，我会看到黄色rect，因为它的鼠标区域是“最上面的”

但在这种情况下，菜单对话框是关闭的，因为当鼠标进入绿色矩形内的鼠标区域时，hoverDialog和hoverTopZone为false

我希望你能理解我的问题。。。这是我的密码：

Test.qml

---

TestMenu.qml 提前感谢,，

---

迭戈

感谢马克·切赫的帮助

我需要关闭对话框时，鼠标退出，所以我想我不能使用'弹出'控制

我解决了这个问题。只使用一个变量来知道鼠标是否在我的对话框（“m_iNumHovered”）上，我每次进入鼠标区域时都会添加一个引用，退出时会减少引用。关键是在绿色矩形上方的鼠标earea中添加/删除一个引用，使其保持“m_iNumHovered=true”（对话框可见）

TestMenu.qml的新代码：

import QtQuick 2.0

Rectangle {
    id: id_dialog

    signal close()

    width: 400
    height: 600

    color: "lightgrey"

    property int m_iNumHovered: 0
    onM_iNumHoveredChanged: update();

    function update() {
        if (m_iNumHovered == 0)
            timer.start();
    }

    function check() {
        if (m_iNumHovered == 0)
            id_dialog.close();
    }

    Timer {
        id: timer
        interval: 100
        running: false
        repeat: false
        onTriggered: check();
    }

    MouseArea {
        id: mouseAreaTopZone
        anchors { bottom: parent.top; horizontalCenter: parent.horizontalCenter}
        width: 50; height: 50

        hoverEnabled: true
        onEntered: m_iNumHovered++;
        onExited: m_iNumHovered--;
    }

    MouseArea {
        id: mouseAreaDialog
        anchors.fill: parent

        hoverEnabled: true
        onEntered: m_iNumHovered++;
        onExited: m_iNumHovered--;
    }

    Rectangle {
        id: rectGreen
        width: 200; height: 100
        anchors.centerIn: parent
        color: "green"

        Rectangle {
            id: rectYellow
            anchors.centerIn: parent
            width: 50; height: 50
            color: "yellow"
            visible: false
        }

        MouseArea {
            anchors.fill: parent

            hoverEnabled: true
            onEntered: { m_iNumHovered++; rectYellow.visible = true; }
            onExited: { m_iNumHovered--; rectYellow.visible = false }
       }
    }
}

---

谢谢你的帮助

我需要关闭对话框时，鼠标退出，所以我想我不能使用'弹出'控制

我解决了这个问题。只使用一个变量来知道鼠标是否在我的对话框（“m_iNumHovered”）上，我每次进入鼠标区域时都会添加一个引用，退出时会减少引用。关键是在绿色矩形上方的鼠标earea中添加/删除一个引用，使其保持“m_iNumHovered=true”（对话框可见）

TestMenu.qml的新代码：

import QtQuick 2.0

Rectangle {
    id: id_dialog

    signal close()

    width: 400
    height: 600

    color: "lightgrey"

    property int m_iNumHovered: 0
    onM_iNumHoveredChanged: update();

    function update() {
        if (m_iNumHovered == 0)
            timer.start();
    }

    function check() {
        if (m_iNumHovered == 0)
            id_dialog.close();
    }

    Timer {
        id: timer
        interval: 100
        running: false
        repeat: false
        onTriggered: check();
    }

    MouseArea {
        id: mouseAreaTopZone
        anchors { bottom: parent.top; horizontalCenter: parent.horizontalCenter}
        width: 50; height: 50

        hoverEnabled: true
        onEntered: m_iNumHovered++;
        onExited: m_iNumHovered--;
    }

    MouseArea {
        id: mouseAreaDialog
        anchors.fill: parent

        hoverEnabled: true
        onEntered: m_iNumHovered++;
        onExited: m_iNumHovered--;
    }

    Rectangle {
        id: rectGreen
        width: 200; height: 100
        anchors.centerIn: parent
        color: "green"

        Rectangle {
            id: rectYellow
            anchors.centerIn: parent
            width: 50; height: 50
            color: "yellow"
            visible: false
        }

        MouseArea {
            anchors.fill: parent

            hoverEnabled: true
            onEntered: { m_iNumHovered++; rectYellow.visible = true; }
            onExited: { m_iNumHovered--; rectYellow.visible = false }
       }
    }
}

---

您看过propagateComposedEvents属性了吗？按钮和弹出窗口是否都必须由悬停控制？如果您改变了使用普通菜单的要求（只要用户点击并按住菜单，菜单就会保持打开状态，然后当鼠标在菜单外释放时，菜单就会释放），那么您可以使用Quick Controls 2.0中的弹出窗口轻松完成，并将closePolicy设置为Popup.CloseOnReleaseOutside是否查看了propagateComposedEvents属性？是否必须通过悬停来控制按钮和弹出窗口？如果您改变了使用普通菜单的要求（只要用户点击并按住菜单，菜单就会保持打开状态，然后当鼠标在菜单外释放时，菜单就会释放），那么您可以使用Quick Controls 2.0中的弹出菜单轻松完成此操作，并将closePolicy设置为Popup.CloseOnReleaseOutside

import QtQuick 2.0

Rectangle {
    id: id_dialog

    signal close()

    width: 400
    height: 600

    color: "lightgrey"

    property int m_iNumHovered: 0
    onM_iNumHoveredChanged: update();

    function update() {
        if (m_iNumHovered == 0)
            timer.start();
    }

    function check() {
        if (m_iNumHovered == 0)
            id_dialog.close();
    }

    Timer {
        id: timer
        interval: 100
        running: false
        repeat: false
        onTriggered: check();
    }

    MouseArea {
        id: mouseAreaTopZone
        anchors { bottom: parent.top; horizontalCenter: parent.horizontalCenter}
        width: 50; height: 50

        hoverEnabled: true
        onEntered: m_iNumHovered++;
        onExited: m_iNumHovered--;
    }

    MouseArea {
        id: mouseAreaDialog
        anchors.fill: parent

        hoverEnabled: true
        onEntered: m_iNumHovered++;
        onExited: m_iNumHovered--;
    }

    Rectangle {
        id: rectGreen
        width: 200; height: 100
        anchors.centerIn: parent
        color: "green"

        Rectangle {
            id: rectYellow
            anchors.centerIn: parent
            width: 50; height: 50
            color: "yellow"
            visible: false
        }

        MouseArea {
            anchors.fill: parent

            hoverEnabled: true
            onEntered: { m_iNumHovered++; rectYellow.visible = true; }
            onExited: { m_iNumHovered--; rectYellow.visible = false }
       }
    }
}