Flutter GridView.builder索引越界问题求助

你把GridView.builder的itemCount固定写死成4，但selectedImagesnew里的图片数量没到4的时候，itemBuilder里去取selectedImagesnew[index]就会超出列表的有效索引范围——比如只有1张图时，index走到1、2、3，自然找不到对应元素，触发越界错误。

思路1：始终显示4个容器，已选图填充，空白位留作添加入口 #

修改itemBuilder，判断当前index是否在已选图片列表的长度范围内，在的话显示图片，不在就显示空白容器（还能加点击添加的逻辑）：

GridView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: 4, // 保持4个容器的总数
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 1
  ),
  itemBuilder: (BuildContext context, int index) {
    if (index < selectedImagesnew.length) {
      // 已选图片的位置，显示图片
      return Container(
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.black26,
            width: 2
          )
        ),
        child: kIsWeb
            ? Image.network(selectedImagesnew[index].path)
            : Image.file(selectedImagesnew[index]),
      );
    } else {
      // 空白位置，做添加图片的入口
      return GestureDetector(
        onTap: getImages,
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.black26,
              width: 2,
              style: BorderStyle.dashed
            )
          ),
          child: const Center(child: Text('Add')),
        ),
      );
    }
  },
)

思路2：只显示已选图片，最多4张 #

把itemCount改成已选图片数量和4的最小值，这样不会生成超出列表长度的索引：

GridView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: selectedImagesnew.length > 4 ? 4 : selectedImagesnew.length,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 1
  ),
  itemBuilder: (BuildContext context, int index) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.black26,
          width: 2
        )
      ),
      child: kIsWeb
          ? Image.network(selectedImagesnew[index].path)
          : Image.file(selectedImagesnew[index]),
    );
  },
)

这种方式下，有几张图就显示几个容器，最多4个，不会出现越界问题。

内容的提问来源于stack exchange，提问作者Mohammad Mustafa Raza