javascript - 从模型动态填充大地图

Question

我正在尝试在 Flickable 中放置大量（5k - 10k 个元素）的矩形。数据来自自定义模型，QAbstractListModel 的子类。预期结果如下所示：

我的第一种方法是使用带有委托的中继器来创建这样的矩形：

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 异步填充地图，如下所示：

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 的情况下提高在合理时间内加载所有元素的性能。还有另一种我想念的方式吗？或者有没有一种优雅的方式来只加载当前视图中需要的元素？在这里采取什么正确方法？

Answer 1

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

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

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

在第一次加载期间优先考虑您的数据和视图，然后再进行操作。