Flutter GridView行间距过大：如何去除多余空白？

问题原因分析 #

你遇到的行间距过大问题，核心原因是子项中使用的Expanded会强制拉伸控件高度，再加上GridView默认的childAspectRatio=1（宽高1:1），导致子项被不必要地拉长，进而出现多余空白。shrinkWrap=true仅控制GridView自身高度，无法解决子项被拉伸的问题。

具体解决方案 #

1. 移除子项中的Expanded #

将子项里的Expanded替换为Container或直接保留核心控件，让子项根据自身内容确定高度，而非强制占用空间。同时如果子项内部用了Column，需设置mainAxisSize: MainAxisSize.min，让Column仅占用内容所需高度。

示例修改（以actualHisabWidget为例）：

// 原写法
Widget actualHisabWidget() {
  return Expanded(
    child: Column(
      children: [Text("Actual Hisab"), TextField()],
    ),
  );
}

// 修改后写法
Widget actualHisabWidget() {
  return Container(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [Text("Actual Hisab"), TextField()],
    ),
  );
}

2. 调整GridView的childAspectRatio #

根据子项实际宽高比例设置该参数，比如你的子项是宽大于高的布局，可将值设为大于1的数（如2.0，表示宽高比2:1），缩小子项高度。

修改后的GridView代码：

GridView.count(
  crossAxisCount: (MediaQuery.of(context).size.width ~/ 500).toInt(),
  shrinkWrap: true,
  padding: EdgeInsets.all(5),
  crossAxisSpacing: 5,
  mainAxisSpacing: 5,
  // 根据子项实际布局调整，示例为宽高比2:1
  childAspectRatio: 2.0, 
  children: [
    actualHisabWidget(),
    actualBheemWidget(),
    lagatHisabWidget(),
    hamaliHisabWidget(),
    actualDoriHisabWidget(),
    pdDiffHisabWidget(),
  ],
)

3. 检查子项内部间距 #

确保子项内部的Padding、Margin没有额外的上下间距，避免间接增大行间距。

验证效果 #

完成上述修改后，GridView的行间距会根据子项实际高度和你设置的mainAxisSpacing来显示，多余空白即可消除。

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