Qt Quick Event Handling

This examples shows GammaRay's capabilities for analyzing Qt Quick event handling issues.

Problem

The example application shows a simple Qt Quick button. Clicking the button is supposed to emit a debug message acknowledging the click.

Button {
    id: myButton
    anchors.fill: parent
    anchors.margins: 20
    text: "Click me!"
    onClicked: console.log("Button clicked!")
}

However, you can observe that this only works on the left side of the button, on the right side clicks have no effect.

Investigation

There are several aspects of this problem that can be analyzed with GammaRay.

Qt Quick element picking

Open the Qt Quick 2 Inspector and select the element picking tool above the scene view on the lower left. Clicking on to the view will select the element at that location. You can notice that picking on the left side of the button will select the button as expected (or one of its internal elements), but picking on the right side selects a second, invisible button.

Button {
    id: hiddenButton
    anchors.fill: parent
    anchors.leftMargin: parent.width / 2
    text: "Hidden button"
    opacity: 0
}

This hidden button consumes the events and thus breaks our example.

Live property editing

Selecting the hidden button in the Qt Quick 2 Inspector or Object Browser tools will show the Properties view on the right. In there we can investigate why the hidden button consumes events, and test our theory by changing properties in the running application.

In our case we will notice that the button is not actually hidden (the visible property is still true), it is merely set to be fully transparent (the opacity property is 0). If we change its visible property to false, our example works as expected, that is clicks on the right half of the button work as well.

Files:

• quick-event-handling/quick-event-handling.pro
• quick-event-handling/quick-event-handling.qml