モデルから大きなマップを動的に設定する

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. ウェブワーカーを使用する場合のようにバックグラウンドでデータをロードしてから、 処理済みの出力を表示に渡します。ビュー自体を操作しないでください。
2. 現在表示されているチャンクまたは要素のみを読み込みます。

ここでのアイデアは、初期画面をすばやく読み込んだ後、バックグラウンドで処理を行い、要素を追加することです。一度にすべての10k要素を入れようとすると、望ましい結果が得られません。

データの優先順位をつけ、最初の読み込み中に最小にしてから操作してください。