🦁

GridView.builderが見えない要素も自動的にビルドされる件

2022/09/03に公開

Flutter == 3.0.2

なんか自分が勘違いしてるような気がすごいするけど。

GridView.builder(
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount
    (crossAxisCount: 2),
    itemCount: state.items.length,
    itemBuilder: (context, index) {
        print(index);
        return GridCellWidget(item: state.items[index]);
    })));

よくあるGridView.builderです。 state.itemsには10件の要素が入っています。

期待する動きとしては、最初のビルド時(=RiverpodのStateNotifierが初期化される)には、見えている要素だけビルドが走り、printが表示される でした。実際には、見えていない要素も全部ビルドされ、0〜9までprintされた。itemCountを100にしてみると、30ぐらいまでprintされた。

crossAxisCountを1に変えた時と ListView.builderの場合は、常に見えていない要素はビルドされなかった。

GridViewの場合は、crossAxisCountの値が動的に変わってもいいようになのか、ある程度余裕を持ってビルドされる挙動に見える。

しかし、Googleフォトのような、すごいたくさん画像があるギャラリーアプリで、ピンチイン・アウトでグリッドのレイアウトを変えるやつ、大変そう。しこたまキャッシュを持ってローカルで制御するしか無さげ。同じ事を200枚程度の画像でやりたいんだが.... 数が決まっているので、予めサムネ用画像を全部ダウンロードしておくのが簡単かなぁ。

Discussion