QML:鼠标区域重叠的问题 [英] QML: Problems with mousearea overlapping
问题描述
我有一个 QML 应用程序和 MouseAreas 的问题.
I have a QML application and problems with MouseAreas.
在一个小型测试应用程序中，有一个红色矩形，当鼠标进入该矩形时，下方会出现一个灰色菜单(使用加载程序创建).
In a small test app, there is a red rectangle and when mouse enters this rect, a grey menu appears below (created with a Loader).
当鼠标悬停在红色矩形或菜单上时，必须打开此灰色菜单.为此，我有 2 个鼠标区域，1 个在红色矩形上，1 个在菜单上.两者都是 'hoverEnabled' 和 'enter' 和 'exit' 我控制 'hoverDialog' 和 'hoverTopZone'.
This grey menu must be open while mouse is over the red rectangle or the menu. For this purpose, I have 2 MouseAreas, 1 over the red rect and 1 over the menu. Both are 'hoverEnabled' and with 'enter' and 'exit' I control 'hoverDialog' and 'hoverTopZone'.
当两者都为 false 时，表示鼠标已退出，因此我关闭菜单(使用信号，Loader 处于非活动状态).
When both are false, it means that the mouse is out, so I close the menu (using a signal, the Loader gets inactive).
计时器是必需的，因为当从mouseAreaTopZone"传递到mouseAreaDialog"时，只有片刻hoverDialog"和hoverTopZone"都是假的.用定时器固定.
The timer is required since when passing from 'mouseAreaTopZone' to 'mouseAreaDialog' there is just a moment with 'hoverDialog' and 'hoverTopZone' are both false. Fixed with the timer.
在菜单中间有一个绿色矩形，并且(仅)当鼠标在那里时，黄色矩形必须可见.
In the middle of the menu there is a green rect, and (only) when mouse is over there, a yellow rect must be visible.
这是我的问题.我在绿色矩形内有一个 MouseArea，但在需要时黄色矩形不可见.
There is my problem. I have a MouseArea inside the green rect, but the yellow rect is not visible when required.
如果我将rectGreen"移动到mouseAreaTopZone"和mouseAreaDialog"下方(即在文件末尾)，当鼠标位于绿色矩形上方时，黄色矩形可见，因为它的鼠标区域是最上面的"'
If I move 'rectGreen' below 'mouseAreaTopZone' and 'mouseAreaDialog' (that is, at the end of the file) I get the yellow rect visible when the mouse is over green rect, since its mouse area is then 'topmost'
但是在这种情况下，菜单对话框是关闭的，因为当鼠标进入绿色矩形内的 MouseArea 时，hoverDialog 和 hoverTopZone 是假的...
BUT in this case, the menu dialog is closed, since when the mouse enters the MouseArea inside green rect, hoverDialog and hoverTopZone are false...
我希望你能理解我的问题......这是我的代码:
I hope U can understand my problem... Here is my code:
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(); }
}
}
提前致谢，迭戈
推荐答案
感谢 Mark Ch 的帮助.
Thanks Mark Ch for your help.
我需要在鼠标退出时关闭对话框，所以我想我不能使用'Popup'控件...
I need to close the dialog when the mouse exits, so I think I can not use 'Popup' control...
我解决了这个问题.只使用一个变量来知道鼠标是否在我的对话框上('m_iNumHovered')，我每次进入鼠标区域时都会添加一个引用，并在退出时减少它.关键是在绿色矩形上方的 MouseArea 中添加/删除引用，以保持它m_iNumHovered=true"(对话框可见)
I solved the problem. Using only one variable to know if the mouse is over my dialog ('m_iNumHovered'), I add a reference every time I enter in a Mouse Area, and I decrease it when I exit. The key was to add/remove a reference in the MouseArea over the green rectangle, to keep it 'm_iNumHovered=true' (dialog visible)
TestMenu.qml 的新代码:
New code for 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:鼠标区域重叠的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
