Scrolling with an attached Scrollbar seems glitchy

[arunpkio]

@jebos Thanks for the nice blog post and the example.

I played around a bit with this example and found the scrolling seems not working correctly when I use the attached ScrollBar.

It does not scroll smoothly if we use the Scrollbar.

[jebos]

can you provide some code snipped so I can take a look?

[arunpkio]

here it is

ListView {
        anchors.fill: parent

        model: 3000

        spacing: 1

        delegate: Item {
            id: delegate

            height: 45
            width: parent.width

            property Item item

            Connections {
                target: item
                ignoreUnknownSignals: true

                onAction: {
                   console.log("blog.basysKom.com: And Action!")
                   item.color = Qt.rgba(Math.random(),Math.random(),Math.random(),1);
                }
            }

            Component.onCompleted: {
                item = elementCache.getDelegate()
                item.parent = delegate
                item.anchors.fill = Qt.binding(function (){ return delegate })
                item.color = Qt.rgba(Math.random(),Math.random(),Math.random(),1);
                item.name = Qt.binding(function (){ return "Current Index:" + index })
                item.aStaticProperty = true
            }

            Component.onDestruction: {
                elementCache.returnDelegate(item)
            }
        }

       ScrollBar.vertical: ScrollBar { }
    }

[jebos]

When taking our example and just adding the ScrollBar {} i don't see any performance degragation. I can scroll with the bar, click around and it just works smooth as expected.

Things that happen when you click on the bar and/or scroll with it:

• More than 1-2 delegates are pushed back into cache and pulled from it, this will definitly be slower that just swiping around.
• The bottlenecks can be:
  • not enough precached Items
  • to much time is spend in "onCompleted". To reduce the time you spend in on completed you have to think about moving the loading of data to a later point in time (after the first rendering). The screen/delegate is only rendered after onCompleted.

To look for the bottleneck you:

1. take a look on the log if you see many new items that are beeing created
2. comment the steps in onCompleted and check if the situation is improved - if so: load the data later.

[arunpkio]

Thanks for those hints.

I had a closer look to find the bottleneck with the help of the QML profiler and found that the Component.onCompleted is taking more time to complete.

The actual line where it gets really stuck is the Line :88 where it assigns the color of the Rectangles in the Grid

color:  Qt.rgba(Math.random(), Math.random(), complexDelegate.color * Math.random(), 1);

precisely the third parameter complexDelegate.color * Math.random() which will get re-valuated for all those delegates when the delegate's color get assigned in the Component.onCompleted

[jebos]

yep. true. Well the example is meant to be a bit extreme in that case, so, try to assign color later by simply adding a timer (i.e. with a randomized intervall).

I may adjust the example along this feedback to demonstrate this option.