Transitioning to an item in ListView

Aras

I am using a ListView to create a card layout so I can swipe left and right to switch from one page to another. However, there is a shortcut to go to "Home Page" which in my case is the card in the center. Lets say index 3. I can switch to this card using the following line:

        view.positionViewAtIndex(3, ListView.Beginning);

Thats was nice and easy and is almost what I expected, however it is missing any sort of transitions. How can I switch to another item in the ListView and show some sort of transition to the user instead of instantly replacing the current item with the item at position?

This is probably a very basic question for someone experienced with qml but I am a bit stuck as how to proceed. Thanks for your help in advance!

J.Hilk

Hi @Aras ,

you could use something along this:

ListView{
....
....
property bool doAnimation: false

Behavior  on contentY{
    enabled: doAnimation
    NumberAnimation{
        duration: 300
        onStopped: doAnimation = false
    }
}
...
}

...
{
doAnimation = true
view.positionViewAtIndex(3, ListView.Beginning);
}

Aras

Thanks for your response @J-Hilk
I tried several variations of adding animation on contentX and contentY but I could not get it to work. positionViewAtIndex would switch to the correct index but without any transitions.

I ended up using the following function:

        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;
	}

Which I found on this post: http://www.qtcentre.org/threads/40680-Animate-ListView-positionViewAtI

That method worked very nicely. Thanks again for your help, it pointed me in the write direction.

ambershark

@Aras Don't forget to mark this as solved for future browsers of this forum. :)