Flutter IndexedWidgetBuilder 与 ListView.builder 与动态项目数？

Posted 2023-02-23

【中文标题】Flutter IndexedWidgetBuilder 与 ListView.builder 与动态项目数？

【英文标题】：Flutter IndexedWidgetBuilder with ListView.builder with dynamic number of items?

【发布时间】：2020-05-19 19:51:43

【问题描述】：

假设我从 API 取回一些数据，我想将它们放入 ListView.builder。我想做延迟加载，因为在任何时候，屏幕上只会显示三个项目。假设数据看起来像这样，我们不能保证获得所有标题，并且我们不知道contents 中有多少项目。

header: HeaderOne
contents: [ItemOne, ItemTwo, ItemThree]

header: HeaderTwo
contents: [ItemOne]

header: HeaderThree // don't display this because contents is empty
contents: [] // don't display this because contents is empty

header: HeaderFour
contents: [ItemOne, ItemTwo]

如果您滚动浏览，UI 中的 ListView 将如下所示：

HeaderOne
ItemOne
ItemTwo
ItemThree
HeaderTwo
ItemOne
HeaderFour
ItemOne
ItemTwo

我在 ListView.builder() 中的 itemBuilder 属性变得很可怕。这是一些伪代码：

itemBuilder: (BuildContext context, index i) 
  if (i == 0 && data.hasHeaderOne)  return _buildHeaderOne(); 
  else if (i == 0 && !data.hasHeaderOne)  return _buildHeaderTwo(); 
  else if (i == 1 && data.hasHeaderOne  return _buildContents(headerOneContents[0]); 
  else if (i == (1 + data.headerOneContents.length) && data.hasHeaderOne && data.hasHeaderTwo)  return _buildContents(headerTwoContents[i+someNumberIHaveToCalculate]); 
  ...

肯定有更好的方法来做到这一点！我考虑过嵌套 ListView.builder() 但不确定这会如何影响性能或滚动。

目标是在我不知道每个项目的索引时使用构建器。我可以计算项目的总数（在本例中为 9），但如果不编写复杂的 if-else 代码，我看不出这有什么帮助。

【参考方案1】：

我最终这样做的方式是创建一个小部件构建器列表，而不是小部件。 例如。类似：

typedef WidgetBuilder Widget Function();

...

final itemBuilder = <WidgetBuilder>[
if (data.hasHeaderOne) () => _buildHeaderOne(),
for (item in data.headerOneContents) () => _buildContents(item),
...
];

return ListView.builder(
  itemCount: itemBuilder.length, 
  itemBuilder: (_, item) => itemBuilder[item](),
);