cross-posted from: https://stackoverflow.com/questions/57079018/qml-cant-get-my-listview-scrollbehavior-correct-in-my-simple-example
Its my first time to use ListView and i need to implement a decent scroll behavior for my application
it "works" but sometimes the animation behavior is a little bit strange
I've wrote a small QML example (runnable with qmlscene tool) to show my problem
Sample source code:
import QtQuick 2.2
import QtQuick.Window 2.5
Window {
width: 500
height: 700
visible: true
// my model ctrl is in C++
// faked it here with pure QML to simplify the example
ListModel {
id: cppModel
// different size - item type depdendend (just const here)
ListElement { name: "Item 1"; active: false; height: 50 }
ListElement { name: "Item 2"; active: false; height: 100 }
ListElement { name: "Item 3"; active: false; height: 150 }
ListElement { name: "Item 4"; active: false; height: 200 }
ListElement { name: "Item 5"; active: false; height: 250 }
ListElement { name: "Item 6"; active: false; height: 300 }
property int currentItemIndex: -1
function activate_item(index) {
// auto deactivate all others
for(var i = 0; i < rowCount(); i++) {
var active = (index === i)
get(i).active = active
if(active) {
currentItemIndex = i
}
}
}
}
Component {
id: listViewDelegate
Rectangle
{
height: model.active ? model.height : 30
width: 600
color: "transparent"
border {color: model.active ? "yellow" : "black"; width: 2}
Behavior on height {
NumberAnimation {
easing.type: Easing.InCirc
duration: 5000
}
}
Text {
text: model.name;
font.pixelSize: 24
}
MouseArea {
anchors.fill: parent
onClicked: {
cppModel.activate_item(model.index)
}
}
}
}
Rectangle
{
width: 400
height: 600
border {color: "steelblue"; width: 2}
ListView {
id: myList
anchors.fill: parent
clip: true
model: cppModel
delegate: listViewDelegate
header: Rectangle {
width: parent.width; height: 50
border {color: "red"; width: 2}
Text {
anchors.centerIn: parent
text: "Header"
font.pixelSize: 32
}
}
highlightMoveDuration: 5000
highlightMoveVelocity: -1
highlightResizeDuration: 5000
highlightResizeVelocity: -1
preferredHighlightBegin: 0
preferredHighlightEnd: currentItem.height
highlightRangeMode: ListView.StrictlyEnforceRange
snapMode: ListView.SnapToItem
currentIndex: -1
onMovementStarted: {
// show header again
highlightRangeMode = ListView.ApplyRange
}
onCurrentIndexChanged: {
// highlight current
highlightRangeMode = ListView.StrictlyEnforceRange
}
}
Connections {
target: cppModel
onCurrentItemIndexChanged: { // change comming from C++
if ( myList.currentIndex !== cppModel.currentItemIndex ) {
myList.currentIndex = cppModel.currentItemIndex
}
}
}
}
}
first: the item that is activated should be scrolled to top (that works) seems ok, only the animation i get are a little strange
my 2 "bad" animation scenarios:
if you activate Item 1..6 downwards, starting with Item 3 the Item Text is moved too far up and then comes back, the up scrolling should always stop at the items top, no bouncing etc. - i've already tried to replace the highlighter but gives me no better result
if you open for example Item 6 and the scroll with mouse to Item 1 and activates item 1, the animation (seems to) first closes the Item 6 and then scrolls the list, better would be that the scrolling/and resize to the activated item 1 is prio and the closing animation of the former item does not block/stutter the item 1 animation
would be glad if someone could kick me in the right direction how to solve the animation problems
thanks
