Swipe (Edge Swipe) in QML
To pull in a side menu on touch devices, I'd like to react to a (preferably single finger) slide gesture starting from outside of the screen. Google's material style seems to call this an "Edge swipe"
I have looked into SwipeView QML Type, but this seems to be targeted for entirely different needs. Customizing the SwipeDelegate appears to be used with "normal" in-screen swipes.
Any starting point or documentation hint would be very welcome!
Re: Swipe (Edge Swipe) in QML
UPDATE: I've found this meanwhile, seems to be a good way to do it. I have added an "edgeSwipe(string fromDirection)" signal and updated onReleased this way:
Code:
onReleased: {
switch (drag.axis) {
case Drag.XAndYAxis:
canceled(mouse)
break
case Drag.XAxis:
if (detectEdgeSwipe && origin.x <= 5) {
edgeSwipe("fromLeft")
} else if (detectEdgeSwipe && origin.x >= parent.parent.width-5){
edgeSwipe("fromRight")
} else {
swipe(mouse.x - origin.x < 0 ? "left" : "right")
}
break
case Drag.YAxis:
if (detectEdgeSwipe && origin.y <= 5) {
edgeSwipe("fromTop")
} else if (detectEdgeSwipe && origin.y >= parent.parent.height-5) {
edgeSwipe("fromBottom")
} else {
swipe(mouse.y - origin.y < 0 ? "up" : "down")
}
break
}
}
The problem is, that swipes that originate from outside the screen are not being registered at all. Any ideas?
Re: Swipe (Edge Swipe) in QML
I have done something like that in the past before swipeview was available, something like this should work:
Code:
import QtQuick 2.4
Rectangle {
id: root
width: 400
height: 380
color: "yellow"
Rectangle {
id: panel
width: parent.width * 0.8
height: parent.height * 0.8
radius: 20
color: "orange"
MouseArea {
id: mouseArea
anchors.fill: parent
drag.target: panel
drag.minimumY: 0
drag.maximumY: 0
drag.minimumX: -panel.width
drag.maximumX: 0
onReleased: {
//if the panel is swiped more than 30% it will hide
//else it will go back to the original position
//this makes a pretty nice effect :)
if (panel.x < -panel.width * 0.3) {
//we need to make sure that a state change happens to
//fire the transition animation
root.state = "show"
root.state = "hide"
}
else {
root.state = "hide"
root.state = "show"
}
}
}
onXChanged: {
console.log(x)
}
}
Rectangle {
id: button
width: 45
height: width
radius: 5
color: "lightblue"
anchors.bottom: parent.bottom
anchors.left: parent.left
MouseArea {
anchors.fill: parent
onClicked: {
root.state = root.state === "show" ? "hide" : "show"
}
}
}
state: "show"
states: [
State {
name: "hide"
PropertyChanges { target: panel; x: -panel.width }
},
State {
name: "show"
PropertyChanges { target: panel; x: 0 }
}
]
transitions: Transition {
NumberAnimation {
target: panel
property: "x"
duration: 1000
easing.type: Easing.OutCubic
}
}
}
Re: Swipe (Edge Swipe) in QML
So, something like Drawer ?