How to add transition to ListView : positionViewAtEnd()/positionViewAtBeginning()

[Fheanor]

Hello,

I need some times to set my View of my ListView on lastItem or firstItem (positionViewAtEnd()/positionViewAtBeginning()).

However, it is a brutal jump and I would like to add a Transition.

I tried to add this :

    Behavior on contentY {
        id: contentYAnimation
        PropertyAnimation {duration: 300 }
    }

But it doesn't change anything.

Any suggestion ?

[p3c0]

@Fheanor Maybe you can try the same with ListView's currentIndex.

[Fheanor]

The best solution I found:

Source

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow
{
    width: 1024
    height: 800
    visible: true
    property int lastAddedIndex: -1
    onLastAddedIndexChanged: gotoIndex(lastAddedIndex)

    function gotoIndex(idx) {
        anim.running = false;

        var pos = lv.contentX;
        var destPos;

        lv.positionViewAtIndex(idx, ListView.Contain);
        destPos = lv.contentX;

        anim.from = pos;
        anim.to = destPos;
        anim.running = true;
    }

    NumberAnimation { id: anim; target: lv; property: "contentX"; duration: 500 }

    Button {
        property int num: 10
        text: 'Add element: ' + num
        onClicked: {
            lastAddedIndex = Math.floor(Math.random(num) * lm.count)
            lm.insert(lastAddedIndex, { num : this.num })
            num++
        }
    }

    ListModel {
        id: lm
        ListElement { num: 0 }
        ListElement { num: 1 }
        ListElement { num: 2 }
        ListElement { num: 3 }
        ListElement { num: 4 }
        ListElement { num: 5 }
        ListElement { num: 6 }
        ListElement { num: 7 }
        ListElement { num: 8 }
        ListElement { num: 9 }
    }

    ListView {
        id: lv
        model: lm
        y: 150
        width: 800
        height: 100
        spacing: 2
        clip: true
        orientation: ListView.Horizontal
        delegate: Rectangle {
            width: 150
            height: 100
            border.color: 'black'
            color: lastAddedIndex === index ? 'purple' : 'white'
            Text {
                anchors.centerIn: parent
                text: index + ': ' + num
            }
        }

        add: Transition { NumberAnimation { property: 'width'; from: 0; to: 150; duration: 600 } }
    }
}