Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Prevent Flickable from returning to bounds
Forum Updated to NodeBB v4.3 + New Features

Prevent Flickable from returning to bounds

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
3 Posts 2 Posters 982 Views 1 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.
  • M Offline
    M Offline
    maitai_vw
    wrote on last edited by
    #1

    Hi,

    I have set:

        boundsBehavior: Flickable.DragAndOvershootBounds
        boundsMovement: Flickable.FollowBoundsBehavior
    

    Although I never call returnToBounds, the flickable returns to bounds automatically when the user stops dragging or pinching. Is there a way to prevent that?

    Thanks
    Philippe.

    DiracsbracketD 1 Reply Last reply
    0
    • M maitai_vw

      Hi,

      I have set:

          boundsBehavior: Flickable.DragAndOvershootBounds
          boundsMovement: Flickable.FollowBoundsBehavior
      

      Although I never call returnToBounds, the flickable returns to bounds automatically when the user stops dragging or pinching. Is there a way to prevent that?

      Thanks
      Philippe.

      DiracsbracketD Offline
      DiracsbracketD Offline
      Diracsbracket
      wrote on last edited by Diracsbracket
      #2

      @maitai_vw
      Are you sure you are defining your Flickable correctly? For instance, are you sure that
      your contentWidth and/or contentHeight are set to an appropriate size?

      In the example below the flicking works as expected (setting contentX allows you to flick both left and right):

              Flickable {
                  id: flickable
                  width: window.width
                  height: window.height
                  contentWidth: 2*window.width
                  contentHeight: window.height
                  contentX: window.width
      
                  Rectangle {
                      color: "red"
                      width: window.width
                      height: window.height
                      x:  0
                  }
      
                  Rectangle {
                      color: "blue"
                      width: window.width
                      height: window.height
                      x:  window.width
                  }
              }
      

      In the following example, contentWidth is just 1 pixel wider than the width of the
      flickable, so if you drag the flickable more than 1 pixel, it will return to its bounds,
      not matter what.

              Flickable {
                  id: flickable
                  width: window.width
                  height: window.height
                  contentWidth: window.width + 1
                  contentHeight: window.height
                  contentX: 0
                  boundsBehavior: Flickable.DragOverBounds
      
                  Rectangle {
                      color: "red"
                      width: window.width/2
                      height: window.height
                      x:  0
                  }
      
                  Rectangle {
                      color: "blue"
                      width: window.width/2
                      height: window.height
                      x:  window.width/2
                  }
              }
      
      M 1 Reply Last reply
      1
      • DiracsbracketD Diracsbracket

        @maitai_vw
        Are you sure you are defining your Flickable correctly? For instance, are you sure that
        your contentWidth and/or contentHeight are set to an appropriate size?

        In the example below the flicking works as expected (setting contentX allows you to flick both left and right):

                Flickable {
                    id: flickable
                    width: window.width
                    height: window.height
                    contentWidth: 2*window.width
                    contentHeight: window.height
                    contentX: window.width
        
                    Rectangle {
                        color: "red"
                        width: window.width
                        height: window.height
                        x:  0
                    }
        
                    Rectangle {
                        color: "blue"
                        width: window.width
                        height: window.height
                        x:  window.width
                    }
                }
        

        In the following example, contentWidth is just 1 pixel wider than the width of the
        flickable, so if you drag the flickable more than 1 pixel, it will return to its bounds,
        not matter what.

                Flickable {
                    id: flickable
                    width: window.width
                    height: window.height
                    contentWidth: window.width + 1
                    contentHeight: window.height
                    contentX: 0
                    boundsBehavior: Flickable.DragOverBounds
        
                    Rectangle {
                        color: "red"
                        width: window.width/2
                        height: window.height
                        x:  0
                    }
        
                    Rectangle {
                        color: "blue"
                        width: window.width/2
                        height: window.height
                        x:  window.width/2
                    }
                }
        
        M Offline
        M Offline
        maitai_vw
        wrote on last edited by maitai_vw
        #3

        @Diracsbracket Thanks for you reply
        I have tried that but this is not good in my case: I have an image in the flickable, and I set contentWidth and contentHeight to exactly the image sourceSize (at the beginning), so the user can zoom, pan, etc.

        If I start with let's say twice the size for the content I get an image zoomed from the beginning, of course.

        But your comment gave me an idea that seems to work: I added margins around the content and it looks like I achieve what I wanted (more test needed)

            flick.bottomMargin = flick.contentHeight / 2
            flick.topMargin = flick.contentHeight / 2
            flick.leftMargin = flick.contentWidth / 2
            flick.rightMargin = flick.contentWidth / 2
        

        Thanks !
        Philippe

        1 Reply Last reply
        1

        • Login

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