An area which detects axis-aligned single-finger drag gestures. More...

Import Statement: import Ubuntu.Components 1.2
Since: Ubuntu.Components 1.3



Detailed Description

The component can be used to detect gestures of a certain direction, and can grab gestures started on a component placed behind of the SwipeArea, therefore the size must be chosen carefully so it can properly detect the gesture.

The gesture direction is specified by the SwipeArea, the gesture will be cancelled on that component.

The drag recognition is performed within the component area in the specified direction. If the drag deviates too much from this, recognition will fail, as well as if the drag or the flick is too short. Once the drag is intercepted, the gesture will be followed even after it leaves the detection area.


import QtQuick 2.4
import Ubuntu.Components 1.3
MainView {
width: units.gu(40)
height: units.gu(70)
Page {
title: "SwipeArea sample"
SwipeArea {
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
height: units.gu(5)
direction: SwipeArea.Upwards
Label {
text: "Drag upwards"
anchors {
centerIn: parent
verticalOffset: parent.dragging ? parent.distance : 0

Note: When used with a Flickable (or SwipeArea next to the Flickable as sibling.

Property Documentation

direction : enum

The direction in which the gesture should move in order to be recognized.

RightwardsAlong the positive direction of the X axis
LeftwardsAlong the negative direction of the X axis
DownwardsAlong the positive direction of the Y axis
UpwardsAlong the negative direction of the Y axis
HorizontalAlong the X axis, in any direction
VerticalAlong the Y axis, in any direction

read-onlydistance : real

The property holds the distance of the swipe from the beginning of the gesture recognition to the current touch position.

read-onlydragging : bool

Reports whether a drag gesture is taking place.

immediateRecognition : bool

Drives whether the gesture should be recognized as soon as the touch lands on the area. With this property set it will work the same way as a MultiPointTouchArea,

Defaults to false. In most cases this should not be set.

read-onlypressed : bool

Reports whether the drag area is pressed.

read-onlytouchPosition : http://doc.qt.io/qt-5/qml-point.html">point

Position of the touch point performing the drag relative to this item.