Skip to content

Instantly share code, notes, and snippets.

@kovrov
Last active August 16, 2023 14:50
Show Gist options
  • Save kovrov/1742405 to your computer and use it in GitHub Desktop.
Save kovrov/1742405 to your computer and use it in GitHub Desktop.
Swipe
/* 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" }
}
}
}
}
/* 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 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
}
}
}
@vishnucool220
Copy link

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

Copy link

ghost commented Jun 24, 2016

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 ?

@gsantner
Copy link

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