Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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)?


Log in to reply