SwipeArea QML Type

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

Import Statement: import Lomiri.Components 1.3
Since: Lomiri.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. The gesture is detected on the SwipeArea, therefore the size must be chosen carefully so it can properly detect the gesture.

The gesture direction is specified by the direction property. The recognized and captured gesture is reported through the dragging property, which becomes true when the gesture is detected. If there was a component under 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 Lomiri.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 ListView, GridView) always put the 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-only] distance : real

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

[read-only] dragging : bool

Reports whether a drag gesture is taking place.

grabGesture : bool

If true, any gestures will be grabbed and owned by the SwipeArea as usual. If false, gestures will still be reported, but events may be grabbed by another Qml object.

Defaults to true. In most cases this should not be unset.

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-only] pressed : bool

Reports whether the drag area is pressed.

[read-only] touchPosition : point

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