O'Reilly logo

Game Programming using Qt 5 Beginner's Guide - Second Edition by Lorenz Haas, Witold Wysota, Pavel Strakhov

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required