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



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


  • Moderators

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



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

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.