wrong position of the items in a large ListView

Question

I need to display a large amount of items in my QML ListView (1,000,000) with a 1px spacing.

Scrolling down my ListView, items are not well positioned (certain items seems overlapped and spacing is superior to 1px).

import QtQuick 2.15
import QtQuick.Controls 2.15


ApplicationWindow {
    id: appWindow

    visible: true
    width: 600
    height: 400

    ListView {
        id: listView

        ScrollBar.vertical: ScrollBar { }

        anchors.fill: parent
        model: 1000000
        spacing: 1.0
        
        delegate: Rectangle {
            implicitWidth: 150
            implicitHeight: 30
            color: "red"
            border.width: 1

            Text {
                anchors.fill: parent
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: index
            }
        }
    }
}

Does anyone know what is going on?

Answer 1

It's a known issue:

QTBUG-43193: ListView has drawing problems with large models

I tried a few workarounds for this, but none of them worked. It looks to be an issue of floating point precision, so if you could figure out how it's going wrong you could try translating each delegate by some amount. For example:

    // ...

    delegate: Rectangle {
        id: delegateItem
        implicitWidth: 150
        implicitHeight: 30
        color: "red"
        border.width: 1

        readonly property bool incorrectlyPositioned: /* ... */

        transform: Translate {
            y: delegateItem.incorrectlyPositioned ? someAmount : 0
        }

        // ...