在 ListView 的顶部和底部添加空容器

Question

我需要在 ListView 的顶部和底部添加一个空容器，以便可以在顶部和底部自动添加分隔线。这是我的 ListView 构建器类

      ListView.separated(
        itemCount: items.length + 2,
        padding: EdgeInsets.only(top: 10),
        itemBuilder: (context, index) {
          print(index); //<= print 0 1 2
          if (index == 0 || index > items.length) { //<= here is problem
            return Container();
          } else {
            return itemBuilder(context, items[index]);
          }
        },
        separatorBuilder: (BuildContext context, int index) =>
            separator == null ? Container() : separator)

这应该可以，但是当我尝试将索引与 0 进行比较时它给了我错误

RangeError(index)：无效值：只有有效值是0：1

Answer 1

我试过你的代码，它工作正常。也许你应该检查 items[] 是否为空

  @override
  Widget build(BuildContext context) {
    var items = [1];
    return ListView.separated(
      itemCount: items.length + 2,
      padding: EdgeInsets.only(top: 10),
      itemBuilder: (context, index) {
        print(index);
        if (index == 0 || index > items.length) {
          return Container(
            height: 50,
            color: Colors.pink,
          );
        } else {
          return Container(
            height: 50,
            color: Colors.blue,
          );
        }
      },
      separatorBuilder: (BuildContext context, int index) => Container(
        height: 50,
        color: Colors.green,
      ),
    );

Answer 2

为 else 块更新你的代码

return itemBuilder(context, items[index-1]);