Qt World Summit: Submit your Presentation

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

    gif file

Log in to reply