User Tools

Site Tools


qt-quick-for-designers-1:interaction_basics

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.
mousearea-example.qml
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

qt-quick-for-designers-1/interaction_basics.txt · Last modified: 2013/07/06 22:52 by mithat