Transitioning to an item in ListView

  • 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!

  • Moderators

    Hi @Aras ,

    you could use something along this:

    property bool doAnimation: false
    Behavior  on contentY{
        enabled: doAnimation
            duration: 300
            onStopped: doAnimation = false
    doAnimation = true
    view.positionViewAtIndex(3, ListView.Beginning);

  • 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; = destPos;
    		anim.running = true;

    Which I found on this post:

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

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

Log in to reply