Question

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

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

当鼠标悬停在红色矩形或菜单上时，必须打开此灰色菜单。为此，我有2个MouseAreas，1个在红色rect上，1个在菜单上。两者都是'hoverEnabled＆＃39;和＆＃39;输入＆＃39;和＆＃39;退出＆＃39;我控制着'hoverDialog＆＃39;和＆＃39; hoverTopZone＆＃39;。

如果两者都为假，则表示鼠标已关闭，因此我关闭菜单（使用信号，Loader变为非活动状态）。

因为来自＆＃39; mouseAreaTopZone＆＃39; to＆＃39; mouseAreaDialog＆＃39;只有片刻与'hoverDialog＆＃39;和＆＃39; hoverTopZone＆＃39;都是假的。用计时器修复。

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

有我的问题。我在绿色矩形内部有一个MouseArea，但是在需要时黄色矩形不可见。

如果我移动＆＃39; rectGreen＆＃39;以下＆＃39; mouseAreaTopZone＆＃39;和＆＃39; mouseAreaDialog＆＃39; （也就是说，在文件的末尾）当鼠标位于绿色矩形之上时，我可以看到黄色矩形，因为它的鼠标区域是最顶层的＆＃39;

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

我希望你能理解我的问题......这是我的代码：

Test.qml

import QtQuick 2.5
import QtQuick.Controls 1.3
import QtQuick.Window 2.0

Item {
    width: 800
    height: 800

    Rectangle{
        id: rect
        anchors { top: parent.top; topMargin: 100; horizontalCenter: parent.horizontalCenter }
        height: 50; width: 50
        color: "red"

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onEntered: loader_dialog.active = true
        }
    }

    Loader {
        id: loader_dialog
        anchors { top: rect.bottom; horizontalCenter: rect.horizontalCenter}
        active: false
        sourceComponent: TestMenu {
            onClose: loader_dialog.active = false;
        }
    }
}

TestMenu.qml

import QtQuick 2.0

Rectangle {
    id: id_dialog

    signal close()

    width: 400
    height: 600

    color: "lightgrey"

    property bool hoverDialog: false
    property bool hoverTopZone: false

    function update() {
        if (!hoverDialog && !hoverTopZone)
            timer.start();
    }

    function check() {
        if (!hoverDialog && !hoverTopZone)
        {
            console.log("close");
            id_dialog.close();
        }
    }

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

    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: { rectYellow.visible = true; }
            onExited: { rectYellow.visible = false }
        }
    }

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

        hoverEnabled: true
        onEntered: { hoverTopZone = true; id_dialog.update(); }
        onExited:  { hoverTopZone = false; id_dialog.update(); }
    }

    MouseArea {
        id: mouseAreaDialog
        anchors.fill: parent

        hoverEnabled: true
        onEntered: { hoverDialog = true; id_dialog.update(); }
        onExited: { hoverDialog = false; id_dialog.update(); }
    }
}

提前致谢，迭

Answer 1

感谢Mark Ch的帮助。

我需要在鼠标退出时关闭对话框，所以我想我不能使用'Popup'控件......

我解决了这个问题。只使用一个变量来知道鼠标是否在我的对话框上（'m_iNumHovered'），每次进入鼠标区域时都会添加一个引用，当我退出时，我会减少它。关键是在绿色矩形上添加/删除MouseArea中的引用，以保持它'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 }
       }
    }
}

QML：mousearea重叠问题

Test.qml

TestMenu.qml

1 个答案: