Flutter中GridView展示图片时末尾加按钮及溢出报错解决方法

问题原因 #

• 布局宽度超限：你在Row中同时放置了宽度为0.8*屏幕宽度的GridView容器和宽度为0.5*屏幕宽度的添加按钮容器，总宽度超过屏幕可用宽度，直接触发RenderFlex溢出报错。
• 需求逻辑错位：当前将添加按钮与GridView平级放置在Row中，没有按需求放在GridView最后一行的末尾，布局逻辑和需求不匹配。

解决方案 #

直接将添加按钮合并到GridView的渲染列表中，不足4张时自动在最后一位渲染添加按钮，不需要额外嵌套Row，从根源避免宽度溢出，同时符合需求。修改后代码如下：

List imageList=["assets/img/pepsi2.jpg","assets/img/pepsi2.jpg"];

addProductsImages(){
  // 无图片时直接返回添加按钮
  if(imageList.isEmpty){
    return Padding(
      padding: const EdgeInsets.only(left: 70),
      child: customImageButton(
        context,
        "+",
        () => pickMultipleImage(),
        MediaQuery.of(context).size.width * 0.3,
        MediaQuery.of(context).size.height * 0.13
      ),
    );
  }
  // 有图片时GridView统一渲染图片+添加按钮
  return SizedBox(
    height: 80,
    width: MediaQuery.of(context).size.width * 0.9,
    child: GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      // 不足4张时多预留1个位置放添加按钮
      itemCount: imageList.length <4 ? imageList.length +1 : imageList.length,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount:4,
        mainAxisSpacing: 8,
        crossAxisSpacing: 8,
      ),
      itemBuilder: (BuildContext context,int index){
        // 最后一位且图片不足4张时渲染添加按钮
        if(index == imageList.length && imageList.length <4){
          return customImageButton(
            context,
            "+",
            () => pickMultipleImage(),
            double.infinity,
            double.infinity
          );
        }
        // 渲染图片卡片
        return Stack(
          children:[
            ClipRRect(
              borderRadius: BorderRadius.circular(10.0),
              child: Image(
                image: AssetImage(imageList[index]),
                fit: BoxFit.cover,
                width: double.infinity,
                height: double.infinity,
              )
            ),
            Align(
              alignment: Alignment.topRight,
              child: buildCancelIcon(
                color,
                () {
                  setState(() {
                    // 先打印再删除，避免下标越界
                    print(imageList[index]);
                    imageList.removeAt(index);
                  });
                },
                Icons.cancel
              )
            )
          ] 
        );
      }
    )
  );
}

核心修改说明 #

• 移除了GridView外层多余的Row嵌套和硬编码的宽度累加逻辑，彻底解决溢出问题
• 合并添加按钮到GridView的item列表，自动排在网格最后一位，完全匹配需求
• 新增NeverScrollableScrollPhysics禁止网格滚动，符合静态展示场景
• 修正了原有删除逻辑中先删除再打印导致的下标越界隐患
• 图片添加fit: BoxFit.cover避免图片变形

调用时因为组件已经固定高度为80，放在Column中不需要额外包裹Expanded，直接调用即可。

内容的提问来源于stack exchange，提问作者TimeToCode