Flutter GridView.builder底部RenderFlex溢出122像素问题求助

问题根源 #

你的代码中SliverGridDelegateWithFixedCrossAxisCount设置了mainAxisExtent: 10，这个参数强制每个网格项的主轴高度仅为10像素，但网格项内部的Column包含100px的图片、10px间距和文本，总高度远超过10px，导致Column没有足够空间渲染，触发溢出错误。

修复方案 #

修改gridDelegate的配置，二选其一即可：

方案1：移除mainAxisExtent，通过childAspectRatio控制比例 #

GridView.builder(
  itemCount: listData.length,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisSpacing: 10,
      crossAxisCount: 2,
      childAspectRatio: 0.8), // 可根据内容调整比例
  itemBuilder: _initGridViewData,
);

方案2：设置能容纳内容的mainAxisExtent值 #

GridView.builder(
  itemCount: listData.length,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      mainAxisExtent: 150, // 足够容纳图片+间距+文本的高度
      crossAxisSpacing: 10,
      crossAxisCount: 2,
      childAspectRatio: 1.0),
  itemBuilder: _initGridViewData,
);

额外优化 #

如果文本可能过长，可给Text组件添加属性避免文本自身溢出：

Text(
  "${listData[index]["title"]}",
  style: const TextStyle(color: Colors.pink),
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

内容的提问来源于stack exchange，提问作者Barbie-Supn