Swipe gesture to changes pages
-
I have existing multipage mobile app. StackView is used to handle pages. I would like implement the swipe gestures to change page (especially to return main page from detail page). I tried to use this swipearea https://gist.github.com/kovrov/1742405 and here is my code:
Item { id: root width: 320 height: 480 StackView { id: stackView anchors.fill: parent initialItem: page1 SwipeArea { id: swipeArea anchors.fill: parent z:-1 property int swipex: 0 onMove: { if (stackView.depth > 1) stackView.currentItem.x = x swipex = x } onSwipe: { slide_anim.target = stackView.currentItem if (swipex >= (root.width/2)){ slide_anim.to = root.width }else{ slide_anim.to = 0 } slide_anim.start() } } PropertyAnimation { id: slide_anim easing.type: Easing.OutExpo properties: "x" onRunningChanged: { if (!running && slide_anim.to > 0) stackView.pop({immediate: true}) } } } Component { id: page1 Rectangle { color: "blue" MouseArea { anchors.fill: parent onClicked: { stackView.push(page2) } } } } Component { id: page2 Rectangle { color: "red" } } }
It works but the previous page is not shown until whole page is swiped. How to show the previous page during the swiping?
https://www.dropbox.com/s/igl5s00zv52tgre/swipe.png?dl=0 -
Any ideas? Maybe this be done using StackViewDelegate... but how to set the transition to follow swipe (finger)?