Game Programming using Qt 5 Beginner's Guide - Second Edition

Time for action – Making the button clickable

So far, our component only looks like a button. The next task is to make it respond to mouse input.

The MouseArea QML type defines a transparent rectangle that exposes a number of properties and signals related to mouse input. Commonly used signals include clicked, pressed, and released. Let's do a couple of exercises to see how the element can be used.

Open the Button.qml file and add a MouseArea child item to the button and use anchors to make it fill the whole area of the button. Call the element buttonMouseArea. Put the following code in the body of the item:

Rectangle {
    id: button
    // ...
    Row { ... }
    MouseArea {
        id: buttonMouseArea
        anchors.fill: parent
        onClicked: button.clicked()
    }
} 

In addition ...