QML trembling delegate in ListView when scrolling
-
I am having some problems with trembling/jerking delegate in ListView when scrolling. I created my chat application.
There are different heights of elements (text, audio, image).
But noticed that there are some scrolling issues if the delegate height is larger, for example 10% of the available screen.I tried to simplify and localize the problem, I thought that the reason for this behavior is several levels in the card of my chat messages.
Unfortunately even I cut off all custom logic and this effect is still happening.
So, does anyone know how to fix this?
Is it possible to smoothly scroll through different delegates?
Thanks, I will be grateful for any help.Here is a simple example showing the problem.
"thumbnailWidth" property from model.
If I make it persistent everything works fine, but the images can be different and this approach is not acceptable.ListView { id: messagesList anchors.fill: parent spacing: 0 //cacheBuffer: 500 //displayMarginBeginning: 500; displayMarginEnd: 500 interactive: true verticalLayoutDirection: ListView.BottomToTop ScrollBar.vertical: ScrollBar {} model: testModel delegate: Image { sourceSize.width: thumbnailWidth onSourceSizeChanged: { console.log("onSourceSizeChanged: " + sourceSize.width) } onVisibleChanged: console.log("onVisibleChanged: " + visible) fillMode: Image.PreserveAspectFit source: "file:////Users/user/Desktop/Screen Shot 2021-03-03 at 10.36.04 AM.png" onSourceChanged: console.log("onSourceChanged: " + source) } }
If I uncomment the cacheBuffer or displayMarginBeginning / displayMarginEnd, the effect disappears.
But in any case, this method has a limitation when jerks are visible again (because of a chat may be big).
In my log i see "onSourceSizeChanged" being called.
But "onVisibleChanged" never.For example:
qml: onSourceSizeChanged: 0 qml: onSourceSizeChanged: 100 qml: onSourceSizeChanged: 100 qml: onSourceSizeChanged: 0 qml: onSourceSizeChanged: 800 qml: onSourceSizeChanged: 800 qml: onSourceSizeChanged: 0 qml: onSourceSizeChanged: 200 qml: onSourceSizeChanged: 200