SwipeGestureHandler

SwipeGestureHandler example

export component Example inherits Window {
    width: 270px;
    height: 100px;

    property <int> current-page: 0;

    sgr := SwipeGestureHandler {
        handle-swipe-right: current-page > 0;
        handle-swipe-left: current-page < 5;
        swiped => {
            if self.current-position.x > self.pressed-position.x + self.width / 4 {
                current-page -= 1;
            } else if self.current-position.x < self.pressed-position.x - self.width / 4 {
                current-page += 1;
            }
        }

        HorizontalLayout {
            property <length> position: - current-page * root.width;
            animate position { duration: 200ms; easing: ease-in-out; }
            property <length> swipe-offset;
            x: position + swipe-offset;
            states [
                swiping when sgr.swiping : {
                    swipe-offset: sgr.current-position.x - sgr.pressed-position.x;
                    out { animate swipe-offset { duration: 200ms; easing: ease-in-out; }  }
                }
            ]

            Rectangle { width: root.width; background: green; }
            Rectangle { width: root.width; background: limegreen; }
            Rectangle { width: root.width; background: yellow; }
            Rectangle { width: root.width; background: orange; }
            Rectangle { width: root.width; background: red; }
            Rectangle { width: root.width; background: violet; }
        }
    }
}

Use the SwipeGestureHandler to handle swipe gesture in some particular direction. Recognition is limited to the element’s geometry.

Specify the different swipe directions you’d like to handle by setting the handle-swipe-left/right/up/down properties and react to the gesture in the swiped callback.

Pointer press events on the recognizer’s area are forwarded to the children with a small delay. If the pointer moves by more than 8 logical pixels in one of the enabled swipe directions, the gesture is recognized, and events are no longer forwarded to the children.

enabled

bool default: true

When disabled, the SwipeGestureHandler doesn’t recognize any gestures.

pressed-position

Point (out) default: (0px, 0px)

Point

This structure represents a point with x and y coordinate

• x (length):
• y (length):

The position of the pointer when the swipe started.

current-position

Point (out) default: (0px, 0px)

Point

This structure represents a point with x and y coordinate

• x (length):
• y (length):

The current pointer position.

swiping

bool (out) default: false

true while the gesture is recognized, false otherwise.

Handle swipe directions properties

handle-swipe-left

bool default: false

handle-swipe-right

bool default: false

handle-swipe-up

bool default: false

handle-swipe-down

bool default: false

Callbacks

• moved(): Invoked when the pointer is moved.
• swiped(): Invoked after the swipe gesture was recognized and the pointer was released.
• cancelled(): Invoked when the swipe is cancelled programmatically or if the window loses focus.

Functions

• cancel(): Cancel any on-going swipe gesture recognition.