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
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.