How to detect swipe gestures in Ubuntu QML applications

We know that in a touchscreen phone, gestures can be used to create actions. Especially with Ubuntu phones, gesture manipulation takes a lot of use. So how can you detect gestures in a QML application? I used to detect a gesture in my Flickr application. Today we use a Web-based example to do an example. This routine is more reusable. Our reference code address: https://gist.github.com/kovrov/1742405

Swipearea.qml

/* This code is written by Sergejs Kovrovs and have been placed in the public domain. */import QtQuick 2.0MouseArea {Property, Origin property, bool Ready:false property int Threshold:units.gu        Signal move (int x, int y) signal swipe (string direction) onpressed: {Drag.axis = Drag.xandyaxis Origin = Qt.point (mouse.x, Mouse.y)} onpositionchanged: {switch (drag.axis) {case Drag.xandyaxis            : if (Math.Abs (mouse.x-origin.x) > Threshold) {drag.axis = Drag.xaxis}            else if (Math.Abs (MOUSE.Y-ORIGIN.Y) > Threshold) {drag.axis = Drag.yaxis}            Break Case Drag.XAxis:move (mouse.x-origin.x, 0) break case Drag.yaxis: Move (0, MOUSE.Y-ORIGIN.Y) Break}} onreleased: {switch (drag.axis) {case drag.x       Andyaxis:canceled (mouse) break Case Drag.XAxis:swipe (mouse.x-origin.x < 0?) ' Left ': ' right ') break case Drag.YAxis:swipe (MOUSE.Y-ORIGIN.Y < 0?) ' Up ': ' Down ') Break}}}

The code here defines a new Mousearea component. This component can be used in any other place where mousearea is needed. You can also understand the overloads for Mousearea (from the C + + perspective, although not accurate). We have no more changes to the original author's code, but I have redefined a "threshold". This is used to adjust the sensitivity of our swipe. For example, a larger value makes it necessary to use a larger slide to produce a swipe signal. Smaller values make the detection of swipe easier. This can be adjusted according to our actual application.
So how do we use this Swipearea component?
Swipe.qml

/* This code is written by Sergejs Kovrovs and have been placed in the public domain. */import QtQuick 2.0Item {id:root width:480 height:320 property var itemdata: ["#22eeeeee", "#22bbbbbb", "  #22888888 "," #22555555 "," #22222222 "] Property int currentindex:0 oncurrentindexchanged: {slide_anim.to =- Root.width * Currentindex slide_anim.start ()} propertyanimation {Id:slide_anim Target:cont ENT Easing.type:Easing.OutExpo Properties: "X"} Image {id:img anchors.verticalcenter        : Root.verticalcenter Source: "Images/wallpaper.jpg" FillMode:Image.PreserveAspectCrop} Item { Id:content Width:root.width * Itemdata.length property Double K: (Content.width-root.width)/(Img.wid        Th-root.width) onxchanged: {img.x = x/k//console.log ("img.x:" + img.x); } Repeater {Model:itemData.length REctangle {x:root.width * index width:root.width; Height:root.height color             : Itemdata[index] Text {text:index+1; anchors.centerIn:parent; font.pointsize:100; color: "#88000000"} }}} swipearea {Id:mouse anchors.fill:parent onMove: {conten        T.x = (-root.width * currentindex) + x//console.log ("content.x" + content.x); } onswipe: {switch (direction) {case ' left ': if (currentindex = = = Itemdata.l ength-1) {currentindexchanged ()} else {Currentind                    ex++} break case ' right ': if (currentindex = = = 0) {                Currentindexchanged ()} else {currentindex--} Break}} onCanceled: {currentindexchanged ()}} Row {anchors {bottom:parent.bottom; BottomMargin: 16;            HorizontalCenter:parent.horizontalCenter} spacing:16 Repeater {model:itemData.length Rectangle {width:12; height:12; Radius:6 Color:currentindex = = = Index? "#88ffffff": "#88000000" border {width:2; color:currentindex = = = Index? "#33000000": "#11000000"}}}}

Just as we normally use Mousearea, we can use swipearea where we need to detect slippage. In this way, we only need to capture the signals emitted from the Swipearea:

    Swipearea {        id:mouse        anchors.fill:parent        onMove: {            content.x = (-root.width * currentindex) + x//            Console.log ("Content.x" + content.x);        }        Onswipe: {            switch (direction) {case            ' left ':                if (currentindex = = = itemdata.length-1) {                    Currentindexchanged ()                }                else {                    currentindex++                } break case ' right            ':                if ( Currentindex = = = 0) {                    currentindexchanged ()                }                else {                    currentindex--                } break            }        }        Oncanceled: {            currentindexchanged ()        }    }

Here, we can capture onswipe to get the direction of swipe. In this case, we are only interested in the left and right. We can swipe left or right through gestures to see the rest of the picture.


The source code for the entire test project is: Git clone https://gitcafe.com/ubuntu/swipe.git

How to detect swipe gestures in Ubuntu QML applications