如何在 ListView 的项目构建器之前添加初始小部件，或者如何在 ListView.itemBuilder 之上注入小部件？

Posted 2023-02-23

【中文标题】如何在 ListView 的项目构建器之前添加初始小部件，或者如何在 ListView.itemBuilder 之上注入小部件？

【英文标题】：How to add initial widgets before ListView's item builder, or How to inject Widgets on top of a ListView.itemBuilder?

【发布时间】：2020-03-29 07:16:50

【问题描述】：

在这个例子中，我想创建一个 ListViewTiles 的 ListView，由 ItemData 的参数 List 填充。 我想放置一个标题图像作为同一个 ListView 的顶部小部件。 Image 必须与 ListTiles 的其余部分一起滚动。

  Widget _buildListViewWithHeader(BuildContext context, Image banner, List<ItemData> items) 
    return ListView.builder(
      itemBuilder: (context, index) 
        return ListTile(
          leading: items[index].leading,
          title: items[index].title,
          trailing: items[index].trailing,
        );
      ,
    );
  

如何将图像放置在 this ListView 的顶部？

是否有一种通用的方法可以将小部件列表传递给 listView 并将它们放在项目构建器生成的小部件之前？

【问题讨论】：

return index == 0? Image.asset(...) : ListTile(...)

是的，但是我必须调整其余小部件的索引，否则永远不会创建第 0 个 ItemData。我想这会起作用：return index == 0? Image.asset(...) : ListTile(items[index-1].leading, ...)

当然：你必须减一来索引你的数据，然后加一到itemCount

【参考方案1】：

您可以在 itemBuilder 的第一个索引上返回标头，例如：

  Widget _buildListViewWithHeader(BuildContext context, Image banner, List<ItemData> items) 
    return ListView.builder(
      itemCount: items == null ? 1 : items.length + 1,
      itemBuilder: (context, index) 
         if (index == 0) 
            // return the header
            return Image.asset(...);
        
        index -= 1;
        return ListTile(
          leading: items[index].leading,
          title: items[index].title,
          trailing: items[index].trailing,
        );
      ,
    );
  

希望对你有帮助！

【参考方案2】：

这是注入任意数量的小部件的更通用的方法：

Widget _buildListViewWithHeader(BuildContext context, List<Widget> topWidgets, List<ItemData> itemData) 
  return ListView.builder(
    itemCount: topWidgets.length + itemData.length,
    itemBuilder: (context, index) 

      if (index < topWidgets.length) //<-- returns each injected widget in list.
        return topWidgets[index];
      

      int itemIndex = index - topWidgets.length; //<-- subtract the number of widgets injected.
      return ListTile(
        leading: itemData[itemIndex].leading,
        title: itemData[itemIndex].title,
        trailing: itemData[itemIndex].trailing,
      );
    ,
  );