如何去除Flutter中GridView.builder元素的多余间距？

DevOps 小满

2026-8-5

解决GridView底部间距与溢出问题

下面是几个针对性的解决办法，你可以根据实际情况尝试：

修正childAspectRatio的计算方式
你当前用20.w / 33.h作为宽高比存在问题：screenutil的.w和.h是基于屏幕尺寸的适配单位，两者相除会得到一个随屏幕宽高比变化的数值，导致GridView的高度计算偏差，进而引发溢出或多余间距。
正确的做法是使用固定的宽高比例，比如直接写20/33，同时在子元素内部用screenutil设置具体的宽高值。修改后的gridDelegate：
```
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: 20 / 33, // 改为固定比例
    crossAxisSpacing: 10.w,
    mainAxisSpacing: 10.h,
),
```
然后在itemBuilder的子Widget里，设置宽为(MediaQuery.of(context).size.width - 10.w) / 2或者直接用100.w这类适配值，高度则按比例自动计算，或者手动设置(你的宽度) * 33/20。
移除不必要的mainAxisSpacing（如果不需要元素间垂直间距）
如果你完全不需要网格元素之间的垂直间距，直接把mainAxisSpacing设为0即可，这样元素上下之间就不会有额外空隙：
```
mainAxisSpacing: 0.h,
```

调整GridView的padding
如果是GridView本身底部有默认的多余padding，可以给GridView加上padding参数，将底部padding设为0：

Widget buildProduct(List<Product> product) => GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      padding: EdgeInsets.only(bottom: 0.h), // 移除底部padding
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 20 / 33,
          crossAxisSpacing: 10.w,
          mainAxisSpacing: 10.h,
      ),
      itemCount: product.length,
      itemBuilder: (context, index) {...}
);