Question

在这个示例中，我想创建一个由ListData的ListDataTiles组成的ListView。
我想将标头图片作为同一ListView的顶部小部件。
图片必须与列表标题的其余部分一起滚动。

  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并将其放置在项目生成器生成的小部件之前的通用方法？

Answer 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,
        );
      },
    );
  }

希望有帮助！

Answer 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,
      );
    },
  );

如何在ListView的项目生成器之前添加初始窗口小部件，或者如何在ListView.itemBuilder顶部注入窗口小部件？

2 个答案: