How to add transition to ListView : positionViewAtEnd()/positionViewAtBeginning()
Unsolved
QML and Qt Quick
-
Hello,
I need some times to set my
View
of myListView
onlastItem
orfirstItem
(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 ?
-
The best solution I found:
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 } } } }