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

Key Events

Key Focus

You can generate a key event when a key is pressed.
Example uses id property to change displayed text.

focusscope-event.qml

import QtQuick 1.0
 
Rectangle {
    color: "lightsteelblue"
    width: 240
    height: 25
 
    Text {
        id: myText
        text: "Press A, B or C"
    }
 
    Item {
        id: keyHandler
        focus: true
        Keys.onPressed: {
           if (event.key == Qt.Key_A)
             myText.text = 'Key A was pressed'
           else if (event.key == Qt.Key_B)
             myText.text = 'Key B was pressed'
           else if (event.key == Qt.Key_C)
             myText.text = 'Key C was pressed'
        }
    }
}

Key Navigation

It is common in key-based UIs to use arrow keys to navigate between focused items.
Example below creates a 2×2 Grid item containing four Rectangles. KeyNavigation is used to change the focus as appropriate.

key-navigation.qml

import QtQuick 1.0
 
Grid {
     columns: 2
     width: 100; height: 100
     Rectangle {
         id: item1
         focus: true
         width: 50; height: 50
         color: focus ? "red" : "lightgray"
         KeyNavigation.right: item2
         KeyNavigation.down: item3
     }
     Rectangle {
         id: item2
         width: 50; height: 50
         color: focus ? "red" : "lightgray"
         KeyNavigation.left: item1
         KeyNavigation.down: item4
     }
     Rectangle {
         id: item3
         width: 50; height: 50
         color: focus ? "red" : "lightgray"
         KeyNavigation.right: item4
         KeyNavigation.up: item1
     }
     Rectangle {
         id: item4
         width: 50; height: 50
         color: focus ? "red" : "lightgray"
         KeyNavigation.left: item3
         KeyNavigation.up: item2
     }
 }

Flickable

Elements placed in a Flickable item can be dragged and flicked.

flickable-area.qml

import QtQuick 1.0
 
Flickable {
     width: 200
     height: 200
     contentWidth: image.width
     contentHeight: image.height
 
     Image {
         id: image;
         source: "images/background.png"
     }
 }

More about Flickable on the Qt 4.8 doc pages.

Resources

images.zip
All source code is subject to this copyright.

Mithat Konar (the wiki)

Table of Contents

Interaction Basics

Mouse Events

Scrollbar example

Key Events

Key Focus

Key Navigation

Flickable

Resources