Question

我试图在一个Flickable中定位一个较大的数字（5k - 10k元素）矩形。数据来自自定义模型，QAbstractListModel的子类。预期结果如下：

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

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

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

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

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

在首次加载期间优先处理数据并查看最小值，然后再进行操作。

从模型动态填充大型地图

1 个答案: