Animate positionViewAtIndex in ListView



  • I have a ListView which looks like a Carousel. The centered item is the current item. When the view is flicked and the flicking does not stop exactly in the middle of the item, the item is snapped.
    I would like to have a smooth transition, no snapping. Is this possible?

    I have already read this "post":http://www.qtcentre.org/threads/40680-Animate-ListView-positionViewAtIndex, but for me it did not work and maybe there is a better solution?
    @
    import QtQuick 2.0

    Rectangle {
    width: 800
    height: 300

    ListView
    {
        id: flickable
        clip: true
        anchors.fill: parent
        orientation: ListView.Horizontal
        anchors.topMargin: 50
        anchors.bottomMargin: 50
        cacheBuffer: 800
        boundsBehavior: Flickable.StopAtBounds
        highlightFollowsCurrentItem: true
        onFlickEnded: positionViewAtIndex(currentIndex, ListView.Center)
        onMovementEnded: positionViewAtIndex(currentIndex, ListView.Center)
    
        onCurrentIndexChanged:
        {
            if (!moving && !flicking)
            {
                positionViewAtIndex(currentIndex, ListView.Center)
            }
        }
    
        onContentXChanged:
        {
            var centerItem = indexAt(contentX+width/2, contentY+height/2)
            if ( centerItem <= 0 )
            {
                centerItem = 0
            }
            else if ( centerItem > count )
            {
                centerItem = count-1
            }
            currentIndex = centerItem
        }
    
        spacing: -300/2.5
        focus: true
        header: Item {width: 300; height: 200 }
        footer: Item {width: 300; height: 200 }
    
        model: 10
        delegate:
            Rectangle
            {
            width: 300
            height: 200
            color: "lightgrey"
            border.color: "green"
            border.width: 2
            z: {
                if (flickable.currentIndex == index) flickable.currentIndex
                else if (flickable.currentIndex > index) index
                else flickable.currentIndex-index
            }
            Text
            {
                font.pointSize: 16
                text: index
                anchors.centerIn: parent
            }
    
            scale:
            {
                if(flickable.currentIndex == index)
                {
                    1.0
                }
                else if (flickable.currentIndex-1 == index || flickable.currentIndex+1 == index)
                {
                    0.83
                }
                else if (flickable.currentIndex-2 == index || flickable.currentIndex+2 == index)
                {
                    0.74
                }
                else
                {
                    0.0
                }
            }
    
            Behavior on scale
            {
                NumberAnimation { duration: 200 }
            }
        }
    }
    

    }
    @


Log in to reply
 

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