Event handlers

Qt Quick is meant to be used for creating user interfaces that are highly interactive. It offers a number of elements for taking input events from the user. In this section, we will go through them and see how you can use them effectively.

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