标签：
我们知道在触屏的手机中，可以利用手势可以产生一下动作。特别是Ubuntu手机，手势的操作利用的非常多。那么怎么可以在QML应用中侦测到手势呢？我以前在我的Flickr应用使用到一个手势的侦测。今天我们利用网上的一个例程来，做一个例子。这个例程更加具有可以重复利用性。我们的参阅代码地址：https://gist.github.com/kovrov/1742405
/* This code was written by Sergejs Kovrovs and has been placed in the public domain. */
import QtQuick 2.0
MouseArea {
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
}
}
}
/* This code was written by Sergejs Kovrovs and has been placed in the public domain. */
import QtQuick 2.0
Item {
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" }
}
}
}
}
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()
}
}
标签：
原文地址：http://blog.csdn.net/ubuntutouch/article/details/45306043
