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