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.0Rectangle {
width: 800
height: 300ListView { 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 } } } }
}
@