我有一个QML应用程序和MouseAreas的问题 .
在一个小型测试应用程序中,有一个红色矩形,当鼠标进入此矩形时,下方会出现一个灰色菜单(使用Loader创建) .
当鼠标悬停在红色矩形或菜单上时,必须打开此灰色菜单 . 为此,我有2个MouseAreas,1个在红色rect上,1个在菜单上 . 两者都是'hoverEnabled'和'enter'和'exit'我控制'hoverDialog'和'hoverTopZone' .
如果两者都为假,则表示鼠标已关闭,因此我关闭菜单(使用信号,Loader变为非活动状态) .
计时器是必需的,因为当从'mouseAreaTopZone'传递到'mouseAreaDialog'时,'hoverDialog'和'hoverTopZone'都只是假的 . 用计时器固定 .
在菜单的中间有一个绿色的矩形,并且(仅)当鼠标在那里时,必须看到一个黄色的矩形 .
有我的问题 . 我在绿色矩形内部有一个MouseArea,但是在需要时黄色矩形不可见 .
如果我将'rectGreen'移到'mouseAreaTopZone'和'mouseAreaDialog'下面(也就是说,在文件末尾),当鼠标位于绿色矩形上时,我会看到黄色矩形,因为它的鼠标区域是“最顶层”
但在这种情况下,菜单对话框关闭,因为当鼠标进入绿色矩形内的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(); }
}
}
先谢谢,迭戈
1 回答
感谢Mark Ch的帮助 .
我需要在鼠标退出时关闭对话框,所以我想我不能使用'Popup'控件...
我解决了这个问题 . 只使用一个变量来知道鼠标是否在我的对话框上('m_iNumHovered'),每次进入鼠标区域时都会添加一个引用,当我退出时,我会减少它 . 关键是在绿色矩形上添加/删除MouseArea中的引用,以保持它'm_iNumHovered = true'(对话框可见)
TestMenu.qml的新代码: