Important: Please read the Qt Code of Conduct -

QML ListView + ScrollArea

  • Greeting Qt Devs,

    I've recently built my own ScrollArea for desktop based Qt Quick applications.
    It's supposed to work with any Item.

    At one point I wanted to insert a ListView inside of it. It inherits from Flickable which already includes scrolling capabilities. So i put interactive to off and forced the ListView height to its contentHeight.

    All was working well until I got a list of 5000 items. The performance turned out to be bad. I guess ListView performs optimizations depending on its size.

    Anyone got an idea on how I could insert a ListView in my generic ScrollArea and make it perform well ?



  • Hi, since you already saw my blog post I guess you saw my reply already. But for others with the same issue, I would like to point out that this performance issue does no longer seem to affect builds of 4.8 and 5.0. ( ) for context.

    [[Fixed URL, Tobias]]

  • Hey Jens,

    I've seen your 1 million items video.

    Day and night compared to 4.7.x. Looking forward to try 4.8 when it's in RC state.


  • Hi,

    Note that forcing the ListView height to its contentHeight will cause all the list items to be instantiated (ListView typically instantiates items "on demand" when they enter the viewport).

    We've talked about making the architecture more generic (so that e.g. the item creation algorithm is more independent of the layout algorithm) and done some research in that direction, but I don't know when/if that will make it into a shipping Qt Quick version.


  • bq. Note that forcing the ListView height to its contentHeight will cause all the list items to be instantiated (ListView typically instantiates items “on demand” when they enter the viewport).

    Yeah that's why I'm trying to cope with contentY and contentHeight to prevent everything being displayed.

    But I've just been linked to this:

    bq. Removing items from the start of the list does not cause all other items to be repositioned.

    @Jens, I'm not sure how to implement a QML ScrollBar correctly. When removing the first item contentY is "screwed". My ScrollBar depends on contentY.

    I think that this ( ) implementation also relies on a contentY. Do you confirm ?

    PS: the only workaround I found is calling reset after beginRemoveRows and beginMoveRows in my model. But I guess that's not very pretty.


  • bunjee. Yes I can confirm that my TableView implementation probably has the same issue with contentY that you describe as it works at the same level. Are there any other issues you have found with your scrollbar solution so far?

  • Looks like someone has pointed it out already:

    Well the other issue I have is related to the dragging of the ScrollBar handle.

    It's a little tricky to describe:

    1. Pressing the left mouse button over the ScrollBar handle.
    2. Move the cursor out of the ScrollBar's MouseArea without scrolling the view.
    3. Try to scroll the view from outside the MouseArea.
    4. Nothing happens.

    This is related to MouseArea.

    On desktop applications it actually scrolls.

    Aside from Scrollbars and Contextual dialogs I have to say I get satisfying results. Not to mention I can leverage all the QML goodness for transitions and animations.

    I'm also reusing a lot of your QML components and the desktop module you provide on Git.


Log in to reply