Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. Mobile and Embedded
  4. Swipe gesture to changes pages
Forum Updated to NodeBB v4.3 + New Features

Swipe gesture to changes pages

Scheduled Pinned Locked Moved Mobile and Embedded
2 Posts 1 Posters 678 Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    J Offline
    jimcad
    wrote on last edited by jimcad
    #1

    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

    1 Reply Last reply
    0
    • J Offline
      J Offline
      jimcad
      wrote on last edited by
      #2

      Any ideas? Maybe this be done using StackViewDelegate... but how to set the transition to follow swipe (finger)?

      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved