javascript - 从模型动态填充大 map

Question

我试图在 Flickable 中放置大量(5k - 10k 元素)的矩形。数据来自自定义模型，即 QAbstractListModel 的子类。预期结果如下所示:

我的第一个方法是使用带有委托(delegate)的中继器来创建如下所示的矩形:

Repeater {
    id: repeater
    model: particleListModel
    delegate: mapDelegate
}

Component {
    id: mapDelegate

Rectangle {
    property bool checked: false
    id: particle
    color: "transparent"
    width: model.boundswidth
    height: model.boundsheight
    x: model.boundsx
    y: model.boundsy
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        onClicked: {
            console.log(model.index)
            particleIndex = model.index
        }
    }
    border.color: mouseArea.containsMouse ? "lightgreen" : (model.index === particleIndex) ? "green" : "red"
    border.width: 1.5
    }
}

这可以很好地显示矩形，但是加载需要很长时间(约 6 秒)，并且在加载时会阻塞 UI。因此，我的第二种方法是使用 Loader 异步填充 map ，如下所示:

Component {
    id: mapDelegate

    Loader {
        id: particle
        asynchronous: true
        onLoaded: {
            console.log("loaded " + model.index)
        }

        sourceComponent:
            Rectangle {
                property bool checked: false
                color: "red"
                width: model.boundswidth
                height: model.boundsheight
                x: model.boundsx
                y: model.boundsy
                MouseArea {
                    id: mouseArea
                    anchors.fill: parent
                    hoverEnabled: true
                    onClicked: {
                        console.log(model.index)
                        particleIndex = model.index
                    }
                }
                border.color: mouseArea.containsMouse ? "lightgreen" : (model.index === particleIndex) ? "green" : "red"
                border.width: 1.5
            }
        }
    }

虽然这有效并且不会阻塞 UI，但需要很长时间才能完成所有元素的加载(约 25 秒)。前几个元素加载得非常快，但加载到最后会变得越来越慢，减慢到您可以看到单个元素被添加的程度。

我希望提高性能，以便在合理的时间内加载所有元素，同时不阻塞 UI。我还有另一种失踪的方式吗？或者是否有一种优雅的方法来仅加载当前 View 中所需的元素？这里采取的正确方法是什么？

Answer 1

如果您正在处理大量数据，则可以利用的技术很少。

1. 首先像使用 webworker 一样在后台加载数据，然后将处理后的输出传递给 View 。避免操纵 View 本身。
2. 尝试仅加载当前 View 中的 block 或元素。

这里的想法是快速加载初始屏幕，然后在后台进行其余的处理并向其添加元素。如果您尝试一次放入所有 10k 个元素，将不会产生理想的结果。

在首次加载期间将数据和 View 的优先级降至最低，然后再进行操作。