如何将ComposedEvents从鼠标上区域传播到按钮

Question

演示：

import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow{
width: 500
height: 500
visible: true
Button {
text: "button"
onClicked: {
console.log("Button onClicked")
}
}
MouseArea {
anchors.fill: parent
propagateComposedEvents: true
onClicked: {
console.log("MouseArea onClicked")
mouse.accepted = false
}
}
}

当点击按钮时，我预期会出现以下情况

qml: MouseArea onClicked
qml: Button onClicked

但只得到

qml: MouseArea onClicked

如何将事件传递给Button？为什么当前的演示无法做到这一点？

Answer 1

似乎一个临时解决方案是：

import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow{
width: 500
height: 500
visible: true
Button {
text: "button"
onClicked: {
console.log("Button onClicked")
}
}
MouseArea {
anchors.fill: parent
onClicked: {
console.log("MouseArea onClicked")
mouse.accepted = false
}
onPressed: {
console.log("MouseArea onPressed")
mouse.accepted = false
}
}
}

结果：

qml: MouseArea onPressed
qml: Button onClicked

这不是我想要的，但可以解决我目前的问题。

Answer 2

如果这是您正在尝试的特定情况，您可以做的一个解决方案是从鼠标区域的onClicked调用按钮点击信号

import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow{
width: 500
height: 500
visible: true
Button {
id:btn
text: "button"
onClicked: {
console.log("Button onClicked")
}
}
MouseArea {
anchors.fill: parent
propagateComposedEvents: true
onClicked: {
console.log("MouseArea onClicked")
btn.clicked()
}
}
}

Answer 3

为什么当前的演示无法做到这一点

关键是文件中组件的顺序很重要，而且这种顺序会影响它们相互重叠的方式。例如，在这种手动定位的情况下，我们可以看到一个组件是如何与另一个组件重叠的，以及它们相对于彼此的显示中反映了什么如果一个组件位于代码中的下方，则该组件将与另一个组件重叠。

因此，在您的情况下，得到以下输出并不奇怪：

qml: MouseArea onClicked

由于MouseArea位于Button之后并且鼠标事件没有到达Button。如果你按相反的顺序排列它们(首先是区域，然后是按钮(，那么输出将如下：

qml: Button onClicked

如何将事件传递给Button

如果单击发生，则它必须引用某个特定组件。这意味着不可能单击一个组件，但可以在多个组件中处理此单击。因此，在您的情况下，您可以首先单击MouseArea，然后从代码中引发对Button的单击，反之亦然。

因此，如果你想得到你在问题中指出的确切输出，那么已经提出的答案将适合你。然而，在这种情况下，我们失去了使用Button组件的标准功能的能力，例如"；"按下时改变颜色"；，等等。所以我可以建议这个解决方案：

import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow {
id: root
width: 500
height: 500
visible: true
MouseArea {
id: ma
anchors.fill: parent
propagateComposedEvents: true
onClicked: {
console.log("MouseArea onClicked")
}
Button {
text: "button"
onClicked: {
console.log("Button onClicked")
ma.clicked(ma.mouseX, ma.mouseY)
}
}
}
}

输出将如下所示：

qml: Button onClicked
qml: MouseArea onPressed

然而，在这种情况下，按压将在两个地方工作，同时保留Button的上述功能。你也可以把Button放在MouseArea下面，这样也可以。