Flickable snap behaviour



  • Hi,

    I have a ListView that displays a full screen items. The default snap behaviour with "snapMode: ListView.SnapOneItem", is that when I drag for, lets say, 10 pixel, the flickable goes to the next item.
    What I would like to achieve is to start the snap after a drag of half the screen.
    Is this possible ?

    Thanks in advance



  • Ok, I have some Ideas that might help
    If you let go the automatic "snapMode: ListView.SnapOneItem", you can implement the behaviour yourself.
    I can think of something like this:
    @
    property double initContentY;
    property double singleItemHeight;//set this somewhere

    onMovementStarted: {
        //save contentY to a custom property on your flickable
        initContentY = contentY
    }
    
    onMovementEnded: {
       //
       var middleOfItem = (contentY-initContentY)%singleItemHeight
       if( Math.abs(middleOfItem) > (singleItemHeight/2)) {//more than half an item was flicked
            contentY += ( singleItemHeight - middleOfItem)
            //increment contentY to flick to the next item
       }
    }
    

    @
    I'm pretty sure you'd have to handle signs properly there even before the remainder operator but I think that's the right way to go...



  • the logic sounds good for what I am trying to achieve.

    Thanks a lot, I will try this in a bit :)



  • Hi all,
    I have implemented a similar algorithm to calculate the current element when flicking:
    @ // Snap One Item policy
    property double initContentX;
    property double initElementNumber;
    property double singleItemWidth:;//set this somewhere

            onMovementStarted:
            {
                //save contentX to a custom property on your flickable
                initContentX = contentX
                //also save current element number
                initElementNumber = contentX / singleItemWidth
            }
    
            onMovementEnded:
            {
                var numberOfItem = Math.round((contentX - initContentX) / singleItemWidth);
                contentX = (singleItemWidth * numberOfItem)
                        + (initElementNumber * singleItemWidth)
            }@
    

    Now my problem is how to set a transition in order to not move immediately to the contentX...
    I try with a simple transition on contentX defined inside my Flickable, but it doesn't work...

    Any suggestion?

    Thanks in advance.



  • @juba
    I tried the below code, it is working for me;

    flickAreaX = (singleItemWidth * numberOfItem)
    + (initElementNumber * singleItemWidth)
    SequentialAnimation {
    id: animation
    NumberAnimation {
    target: flickArea
    property: "contentX"
    to: flickAreaX
    duration: 200
    easing.type: Easing.InOutQuad
    }
    }

    Thanks !!


Log in to reply
 

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