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

                //save contentX to a custom property on your flickable
                initContentX = contentX
                //also save current element number
                initElementNumber = contentX / singleItemWidth
                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