This is an old revision of the document!

Interaction basics

Mouse Events

The MouseArea item handles mouse events for items that are on the scene.
They can emit signals which are used to specify behaviors.

import QtQuick 1.0
 
Item {
    width: 300
    height: 300
 
    Rectangle {
        width: 100
        height: 100
        color: "green"
 
        MouseArea {
            anchors.fill: parent
            onClicked: { parent.color = 'red' }
        }
    }
}

Signals associated with MouseArea:
- onCanceled
- onClicked
- onDoubleClicked
- onEntered
- onExited
- onPositionChanged
- onPressAndHold
- onPressed
- onReleased

Scrollbar example

You build complex interactions with trees of elements and behaviors connecting them.
In addition to generating signals, MouseArea can be dragged.
Create a green horizontal slider in the middle of the scene that contains a red handle. Put a MouseArea in the handle and use that to drag the slider.

scrollbar-mousearea-example.qml

import QtQuick 1.0
 
Item {
    id: myItem
    width: 350
    height: 350
 
    Rectangle {
        id: slider
        width: 320
        height: 40
        color: "green"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
 
        Rectangle {
            id: handle
            width: 40
            height: 40
            color: "red"
 
            MouseArea {
                anchors.fill: parent
                drag {
                    target: parent
                    axis: "XAxis"
                    minimumX: 0
                    maximumX: slider.width - handle.width
                }
            }
        }
    }
}

Mithat Konar (the wiki)

Table of Contents

Interaction basics

Mouse Events

Scrollbar example

Key Events