How to propagateComposedEvents to Button from upper MouseArea? - qt

Question

Demo:
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
}
}
}
I expected below when click the button
qml: MouseArea onClicked
qml: Button onClicked
but only got
qml: MouseArea onClicked
How to make the event pass to Button? and why the current demo cannot do that?

Answer 1

it seems a temp solution is:
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
}
}
}
result:
qml: MouseArea onPressed
qml: Button onClicked
it is not what I want but can solve my current problem.

Answer 2

If this is a specific case which you are trying, one solution which you can do is to call the button clicked signal from onClicked in mouse area
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

Why the current demo cannot do that?
The point is that the order of the components in the file matters, and this order affects how they overlap each other. For example, in this case of manual positioning, we see how one component overlaps another, what is reflected in their display relative to each other. One component will overlap another component if it is located below in the code.
So in your case, it is not surprising that you get the following output:
qml: MouseArea onClicked
since the MouseArea is located after the Button, and mouse events do not reach the Button. If you arrange them in the reverse order (first the area, and then the button), then the output will be as follows:
qml: Button onClicked
How to make the event pass to Button?
If a click occurs, then it must refer to some one specific component. This means that it will not be possible to click on one component, but to process this click already in several. Therefore, in your case, you can first click on the MouseArea, and then provoke a click from the code on the Button, or vice versa.
Thus, if you want to get exactly the output that you indicated in the question, the already proposed answer will suit you. However, in this case, we lose the ability to use the standard functionality of the Button component, such as "change color when pressed", and more. So I can suggest this solution:
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)
}
}
}
}
The output will look like this:
qml: Button onClicked
qml: MouseArea onPressed
However, in this case, pressing will work in two places, and at the same time the above-described functionality of the Button is preserved. You can also place the Button under the MouseArea - this will work too.