Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Qt Academy Launch in California!

    Swipe gesture to changes pages

    Mobile and Embedded
    1
    2
    498
    Loading More Posts
    • 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
      jimcad last edited by jimcad

      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 Reply Quote 0
      • J
        jimcad last edited by

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

        1 Reply Last reply Reply Quote 0
        • First post
          Last post