利用SwipeArea来识别手势操作

在Ubuntu.Components 1.3中，有一个新增加的API叫做SwipeArea．我们可以通过这个API来识别我们的手势．这对一些需要手势进行操作的应用来说无疑是一个非常必要的接口．

\

我们还是先来看一个简单的代码吧：

Main.qml

\

import QtQuick 2.4
import Ubuntu.Components 1.3

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "swipearea.liu-xiao-guo"

    width: units.gu(60)
    height: units.gu(85)

    property int index: 1

    Page {
        title: "SwipeArea sample"

        Image {
            id: img
            anchors.fill: parent
            source: "images/image1.jpg"
        }

        SwipeArea {
            id: swipeleft
            anchors {
                left: parent.left
                right: parent.right
                bottom: parent.bottom
                top: parent.top
            }

            // SwipeArea.Rightwards
            direction:  SwipeArea.Leftwards

            onDraggingChanged: {
                console.log("dragging: " + dragging)

                if ( dragging ) {
                    index ++;

                    if ( index >= 5) {
                        index = 5
                    }

                    var image = "images/image" + index + ".jpg"
                    console.log("image source: " + image)
                    img.source = image
                }
            }
        }

        SwipeArea {
            id: swiperight
            anchors {
                left: parent.left
                right: parent.right
                bottom: parent.bottom
                top: parent.top
            }

            // SwipeArea.Rightwards
            direction: SwipeArea.Rightwards

            onDraggingChanged: {
                console.log("dragging1: " + dragging)

                if ( dragging ) {
                    index--

                    if ( index <= 1 ) {
                        index = 1
                    }

                    var image = "images/image" + index + ".jpg"
                    console.log("image source1: " + image)
                    img.source = image
                }
            }
        }
    }
}

\

在上面的应用中，我们通过一个识别向左划和向右划的两个手势识别来切换我们的照片．整个设计非常简单明了．

\

  \

\

整个项目的源码在： github.com/liu-xiao-gu…

\

\