Last active
August 16, 2023 14:50
-
-
Save kovrov/1742405 to your computer and use it in GitHub Desktop.
Swipe
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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: "http://www.picgifs.com/wallpapers/wallpapers/abstract-3d/wallpaper_abstract-3d_animaatjes-39.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 | |
} | |
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 | |
} | |
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" } | |
} | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* File generated by Qt Creator, version 2.6.2 */ | |
import QmlProject 1.1 | |
Project { | |
mainFile: "swipe.qml" | |
/* Include .qml, .js, and image files from current directory and subdirectories */ | |
QmlFiles { | |
directory: "." | |
} | |
JavaScriptFiles { | |
directory: "." | |
} | |
ImageFiles { | |
directory: "." | |
} | |
/* List of plugin directories passed to QML runtime */ | |
// importPaths: [ "../exampleplugin" ] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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 | |
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) > 16) { | |
drag.axis = Drag.XAxis | |
} | |
else if (Math.abs(mouse.y - origin.y) > 16) { | |
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 | |
} | |
} | |
} |
Hello verry good work !!
In my case I want add a custom content on on Item. But gesture example "Mouse Area" are not recognized. :(
Any Idea ?
Hi there,
I updated SwipeArea and added treshhold, and dir constants.
See https://gist.github.com/gsantner/bb0d98ea0616f82f484ab2b99ff99527#file-swipearea-qml
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello,
Very nice Implementation. Can you please show an example on how to integrate your swipe function to an existing QML project. I have all the QML files. How should I add them one by one, when swiped.Thanks