Animate ListView positionViewAtIndex

[_Stefan]

Hello all,

I want to create a ListView with some items. I have no problems there.
Just now, when an item is added, that does not fit in the list anymore, I would like the list to add the item and then scroll up.

I now implemented this with positionViewAtIndex, which works. But this is an immediate action. I want the list to visually scroll up, or maybe even better, animate the adding of the item (which is animated on height, so goes from 0 height, to 70) and scroll up at the same time, or something.

Anyway, something more fancy than I have now =)
I cannot find anything on the internet how to do this.

Maybe someone has done this before, or can point me in the right direction?

[leonty]

I'm advised with this from the qt support (though I don't get some details in this implementation):

import QtQuick 1.0
 
Rectangle {
	id: window
	width: 360
	height: 640
 
	function gotoIndex(idx) {
		var pos = view.contentY;
		var destPos;
		view.positionViewAtIndex(idx, ListView.Beginning);
		destPos = view.contentY;
		anim.from = pos;
		anim.to = destPos;
		anim.running = true;
	}
 
	GridView{
		id: view
		anchors.fill: parent
		model: 200
		delegate: Text { text: index }
	}
 
	MouseArea {
		anchors.fill: parent
		onClicked: gotoIndex(30)
	}
 
	NumberAnimation { id: anim; target: view; property: "contentY"; duration: 500 }
}

import QtQuick 1.0

Rectangle {
	id: window
	width: 360
	height: 640

	function gotoIndex(idx) {
		var pos = view.contentY;
		var destPos;
		view.positionViewAtIndex(idx, ListView.Beginning);
		destPos = view.contentY;
		anim.from = pos;
		anim.to = destPos;
		anim.running = true;
	}

	GridView{
		id: view
		anchors.fill: parent
		model: 200
		delegate: Text { text: index }
	}

	MouseArea {
		anchors.fill: parent
		onClicked: gotoIndex(30)
	}

	NumberAnimation { id: anim; target: view; property: "contentY"; duration: 500 }
}

To copy to clipboard, switch view to plain text mode 

[guatedude2]

I'm advised with this from the qt support (though I don't get some details in this implementation):

import QtQuick 1.0
 
Rectangle {
	id: window
	width: 360
	height: 640
 
	function gotoIndex(idx) {
		var pos = view.contentY;
		var destPos;
		view.positionViewAtIndex(idx, ListView.Beginning);
		destPos = view.contentY;
		anim.from = pos;
		anim.to = destPos;
		anim.running = true;
	}
 
	GridView{
		id: view
		anchors.fill: parent
		model: 200
		delegate: Text { text: index }
	}
 
	MouseArea {
		anchors.fill: parent
		onClicked: gotoIndex(30)
	}
 
	NumberAnimation { id: anim; target: view; property: "contentY"; duration: 500 }
}

import QtQuick 1.0

Rectangle {
	id: window
	width: 360
	height: 640

	function gotoIndex(idx) {
		var pos = view.contentY;
		var destPos;
		view.positionViewAtIndex(idx, ListView.Beginning);
		destPos = view.contentY;
		anim.from = pos;
		anim.to = destPos;
		anim.running = true;
	}

	GridView{
		id: view
		anchors.fill: parent
		model: 200
		delegate: Text { text: index }
	}

	MouseArea {
		anchors.fill: parent
		onClicked: gotoIndex(30)
	}

	NumberAnimation { id: anim; target: view; property: "contentY"; duration: 500 }
}

To copy to clipboard, switch view to plain text mode 

Worked like a charm!
Thanks

[damianatorrpm]

In case anyone comes across the same issue:
do NOT do

function gotoIndex(idx) {
		var pos = view.contentY;
		var destPos;
		view.positionViewAtIndex(idx, ListView.Beginning);
		destPos = view.contentY;
		anim.from = pos;
		anim.to = destPos;
		anim.running = true;
	}

function gotoIndex(idx) {
		var pos = view.contentY;
		var destPos;
		view.positionViewAtIndex(idx, ListView.Beginning);
		destPos = view.contentY;
		anim.from = pos;
		anim.to = destPos;
		anim.running = true;
	}

To copy to clipboard, switch view to plain text mode 

instead use:

function gotoIndex(idx) {
                anim.running = false
		var pos = view.contentY;
		var destPos;
		view.positionViewAtIndex(idx, ListView.Beginning);
		destPos = view.contentY;
		anim.from = pos;
		anim.to = destPos;
		anim.running = true;
	}

function gotoIndex(idx) {
                anim.running = false
		var pos = view.contentY;
		var destPos;
		view.positionViewAtIndex(idx, ListView.Beginning);
		destPos = view.contentY;
		anim.from = pos;
		anim.to = destPos;
		anim.running = true;
	}

To copy to clipboard, switch view to plain text mode 

If you wonder why, well I copied the original and implemented onWheel scrolling, when scrolling released the event again, the view go stuck since the animation was not finished, with adding on top the anim.running=false, you cancel the old animation and continue with the new one actually