Flickable snap behaviour

deimos

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

cpscotti

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...

deimos

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

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

juba

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.

CoolPraveena

@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 !!