CODEWITHSUNDEEP
qtqmlqt5.9
Jeggu
Jeggu

Reputation: 579

How to improve ListView performance during scrolling in qt/qml

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"
                }

            }
        }
    }
}

Upvotes: 0

Views: 3857

Answers (2)

dtech
dtech

Reputation: 49289

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.

Upvotes: 2

TheSHEEEP
TheSHEEEP

Reputation: 3132

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

  1. 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.

  2. 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.

Upvotes: 2

Related Questions