How to improve ListView performance during scrolling in qt/qml

Question

I am facing serious issues while scolling ListView when there is costly delegate. When i am scrolling listview, its jerky.

Some once please help on this.

Here is my sample code

/LIstview with some dummy costly delegate, I tried using loader to load the delegate then its a bit better but still its jerky/

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Window 2.2

ApplicationWindow {
    visible: true
    width: Screen.width
    height: Screen.height

    ListView {
        width: Screen.width
        height: Screen.height

        model: 500
        spacing: 10

        highlightMoveVelocity: 50

        flickDeceleration: 500
        delegate: Loader{
            asynchronous: true
            sourceComponent: Image {
                width: Screen.width
                asynchronous: true
                height: index %2 === 0 ? 500: 200
                source: "file:///home/Downloads/4k.jpg"

               ///Just for show
                Image {
                    anchors.fill: parent
                    asynchronous: true
                    source: "file:///home/Downloads/4k.jpg"
                }
                Image {
                    anchors.fill: parent
                    asynchronous: true
                    source: "file:///home/Downloads/4k.jpg"
                }
                Image {
                    anchors.fill: parent
                    asynchronous: true
                    source: "file:///home/Downloads/4k.jpg"
                }
                Image {
                    anchors.fill: parent
                    asynchronous: true
                    source: "file:///home/Downloads/4k.jpg"
                }
                Image {
                    anchors.fill: parent
                    asynchronous: true
                    source: "file:///home/Downloads/4k.jpg"
                }
                Image {
                    anchors.fill: parent
                    asynchronous: true
                    source: "file:///home/Downloads/4k.jpg"
                }
                Image {
                    anchors.fill: parent
                    asynchronous: true
                    source: "file:///home/Downloads/4k.jpg"
                }

            }
        }
    }
}

Create a C++ model with precaching of images. – Dmitry Sazonov Jan 19 '18 at 06:59 — Dmitry Sazonov, Jan 19 '18 at 06:59

dtech · Answer 1 · 2018-01-22T19:19:41.667

2

Maybe try increasing the cacheBuffer property. And remember - the value is pixels you want to pre-load.

Other than that, streamlining the delegate is the way to go, but that would require your actual use case rather than just some dummy costly delegate.

edited Jan 22 '18 at 19:19

answered Jan 19 '18 at 08:53

dtech

47,916
17
112
190

TheSHEEEP · Answer 2 · 2018-01-21T08:04:52.190

Since it is unclear what is exactly is costly about your model/delegate, I cannot give exact advice, but:

If you have to create a list that is very long, containing items that require some rather costly code to run to fully show them:
You could run the costly code in a background thread, then update the display as the calculations are finished. In the meantime, you can present a non-finished version of the data. Once the calculations for one item are finished, you update the display.
This could be improved even more by caching the result.
Make use of QAbstractListModel's fetchMore functionality to fill the list slowly as the scrolling progresses. Here is a good example.

Both approaches can be combined, of course.
And naturally C++ is required for the solutions, but that's rather unavoidable once the limitations of QML are hit.

Thanks for reply. Delegate creation time is more because of this scrolling is not smooth. — Jeggu, Jan 19 '18 at 19:32

How to improve ListView performance during scrolling in qt/qml

2 Answers2