MouseArea 事件传播到其父级兄弟。为什么?
MouseArea event is propagated to its parent sibling. Why?
这是代码的当前形式的代码片段
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
悬停事件向下传播到 layout
中的 ToolButtons
。我不明白为什么。因此,onEntered
和 onExited
事件不会按预期工作,因为 onExited
发生在 MouseArea
内部,而 ToolButtons
是 'hovered' 并显示工具提示。最后我需要 MouseArea
比它的父级 Rectangle
更宽和更长,这样一旦 onExited
被发出,menu
就会变得不可见。 Rectangle
测试成功后,将 C++ 类型设为 Polygon 是有意义的。
在您的示例中,onExited
必须在输入 ToolButton
时发出。根据 MouseArea.exited():
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
}
}
Moving the mouse into mouseArea2
from mouseArea1
will cause mouseArea1
to emit the exited signal.
如果您不想发出 exited
信号,
If instead you give the two MouseAreas a parent-child relationship, moving the mouse into mouseArea2
from mouseArea1
will not cause mouseArea1
to emit exited. Instead, they will both be considered to be simultaneously hovered.
也就是说,将 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 {}
}
}
}
}
}
这是代码的当前形式的代码片段
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
悬停事件向下传播到 layout
中的 ToolButtons
。我不明白为什么。因此,onEntered
和 onExited
事件不会按预期工作,因为 onExited
发生在 MouseArea
内部,而 ToolButtons
是 'hovered' 并显示工具提示。最后我需要 MouseArea
比它的父级 Rectangle
更宽和更长,这样一旦 onExited
被发出,menu
就会变得不可见。 Rectangle
测试成功后,将 C++ 类型设为 Polygon 是有意义的。
在您的示例中,onExited
必须在输入 ToolButton
时发出。根据 MouseArea.exited():
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
}
}
Moving the mouse into
mouseArea2
frommouseArea1
will causemouseArea1
to emit the exited signal.
如果您不想发出 exited
信号,
If instead you give the two MouseAreas a parent-child relationship, moving the mouse into
mouseArea2
frommouseArea1
will not causemouseArea1
to emit exited. Instead, they will both be considered to be simultaneously hovered.
也就是说,将 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 {}
}
}
}
}
}