{"id":3898,"date":"2020-12-10T10:04:19","date_gmt":"2020-12-10T09:04:19","guid":{"rendered":"https:\/\/www.basyskom.de\/?p=3898"},"modified":"2024-01-04T17:19:43","modified_gmt":"2024-01-04T16:19:43","slug":"speedup-your-qt-qml-list-scrolling-on-lowend-devices","status":"publish","type":"post","link":"https:\/\/www.basyskom.de\/en\/speedup-your-qt-qml-list-scrolling-on-lowend-devices\/","title":{"rendered":"Speedup your Qt\/QML list scrolling on lowend devices"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

How scrolling in Qt\/QML ListViews is implemented<\/h2>

In order to display something in a listview, you need to provide a data model and a delegate. The delegate defines how each data item from the model is displayed. By default, QML will not create all list entries (aka. delegates) upfront. Instead, the engine will create and show only visible entries as well as a few additional ones (for caching). This results in faster loading times and less memory usage compared to an approach where all entries are created upfront.<\/p>

When scrolling, additional list entries are created on-demand. QML will create a delegate for each newly visible model entry. At the same time, delegates, that become invisible and move out of the cached range are destroyed.<\/p>

Creating simple items is fast and cheap, whereas the creation of complex QML objects can become quite slow (e.g. items containing several text elements, buttons, icons and logic).<\/p>

The QML ListView prior to Qt 5.15 gives you the cache buffer property<\/a> to tweak the caching behavior. It allows you to adjust the pixel range, in which delegates will be created and not be destroyed. You pay for it with an increase in memory usage and loading time of your QML scene. Increasing the cache buffer is okay on small static lists, it won’t help you on lists with a dynamic amount of entries.<\/p>

Since the issue is caused by the creation and destruction of those complex delegates, wouldn’t it be nice to keep the delegates and reuse them? While this is not a built-in option pre Qt 5.15, we can use the mechanics of QML, in combination with a little help of JavaScript, to achieve the same result!<\/p>

In order to do that, we need to hook into the creation and destruction of delegates by the list view. This can be done via the Component.onCompleted<\/code> and Component.onDestruction<\/code> signals of the delegate. We will use this to create a custom delegate cache that will recycle delegates.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Let’s build a delegate cache<\/h2>\n

First, we add an item into our main.qml<\/code>. Then we give the it the id elementCache<\/code>, but you can call it however you like.
Said item also contains a JavaScript array called delegateCache<\/code> as well as two functions called getDelegate<\/code> and returnDelegate<\/code>.<\/p>\n

Component.onCompleted<\/code> creates delegates upfront and pushes them into the cache. Note, if the cache is empty, additional delegates are created in the getDelegate <\/code>function and reused on demand.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t
Item {\r\n        id: elementCache\r\n\r\n        visible: false\r\n\r\n        property var delegateCache: []\r\n\r\n        function getDelegate() {\r\n            console.log("getDelegate, cache size", delegateCache.length)\r\n            if (delegateCache.length > 0)\r\n            {\r\n                return delegateCache.pop()\r\n            }\r\n            else\r\n            {\r\n                return delegateComponent.createObject(elementCache)\r\n            }\r\n        }\r\n\r\n        function returnDelegate( item ) {\r\n            console.log("returnDelegate", item, "size", delegateCache.length)\r\n            \r\n            item.parent = elementCache\r\n        \r\n            \/* \r\n                reset all properties of the delegate \r\n                this is important to get rid of bindings\r\n                if you dont do this, you may experience crashes\r\n                \r\n                i.e.\r\n                \r\n                item.myProperty = ""\r\n                item.myBindedProperty = false\r\n            *\/\r\n            item.anchors.fill = elementCache\r\n            item.name = ""\r\n            item.aStaticProperty = false\r\n\r\n            delegateCache.push( item )\r\n        }\r\n\r\n        Component.onCompleted: {\r\n            for (var i = 0; i < 10; ++i)\r\n            {\r\n                var element = delegateComponent.createObject(elementCache)\r\n                delegateCache.push(element)\r\n            }\r\n        }\r\n\r\n        Component {\r\n            id: delegateComponent\r\n\r\n            MyComplexDelegate {}\r\n        }\r\n    } <\/code><\/pre>