How can I detect the Swipe gesture and qmlswipe In the Ubuntu QML application?

How can I detect the Swipe gesture and qmlswipe In the Ubuntu QML application?

We know that in mobile phones with touch screens, gestures can be used to generate actions. In particular, the Ubuntu mobile phone uses a lot of gestures. How can we detect gestures in the QML application? I used to detect a gesture in my Flickr application. Today, we use an online routine as an example. This routine is more reusable. Our Reference Code address: https://gist.github.com/kovrov/1742405

SwipeArea. qml

/* This code was written by Sergejs Kovrovs and has been placed in the public domain. */import QtQuick 2.0MouseArea {    property point origin    property bool ready: false    property int threshold: units.gu(20)    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.XAndYAxis:            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 defines the Component of a new MouseArea. This Component can be used anywhere else where MouseArea is needed. You can also understand the overload of MouseArea (though not accurate from the C ++ perspective ). We haven't made any 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 large value makes it necessary to use a large slide to generate a swipe signal. Smaller values make swipe detection easier. This can be adjusted based on our actual application.
So how can we use this SwipeArea Component?
Swipe. qml

/* This code was written by Sergejs Kovrovs and has 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: content        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.width - 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: {            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()        }    }    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 slide. In this way, we only need to capture the signal from 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 example, we are only interested in left and right. We can slide left or right through a gesture to see other parts of an image.


The entire test project source code in: git clone https://gitcafe.com/ubuntu/swipe.git