5

このようなレイアウトを実現し、Flutter で効率的にレンダリングできますか?

例:

ここに画像の説明を入力

黄色と青色のブロックはどちらも約 30 個の要素になる可能性があるため、ListView.builder のようなものを使用する必要があると思います。

内側の 2 つの ListView.builder を、shrinkWrap = true でネストしてみました。黄色のブロックは必要なときにのみ作成されますが、青いリストには itemBuilder がありますが、すべての子要素が一度に作成されるため、パフォーマンスの問題が発生します。

new ListView.builder(
  itemCount: 20,
  itemBuilder: (BuildContext context, int blockIdx) {
    print("Building block $blockIdx");
    return new Column(
      children: [
        Padding(
          child: Text("Block $blockIdx"),
          padding: EdgeInsets.all(8.0)
        ),
        ListView.builder(
          shrinkWrap: true,
          physics: ClampingScrollPhysics(),
          itemCount: 30,
          itemBuilder: (BuildContext context, int childIdx) {
            print("Building block $blockIdx child $childIdx");
            return Padding(
              child: Text("Child $childIdx"),
              padding: EdgeInsets.only(left: 20.0, right: 8.0, top: 8.0, bottom: 8.0),
            );
          },
        );
      ],
    );
  },
);

前もって感謝します。

4

0 に答える 0