Flutter中GridView.builder设置间距为0仍有较大空隙如何解决？

你出现的网格空隙问题由代码中多处配置疏漏导致，按以下步骤修改即可解决：

• 移除GridView.builder外层多余的OverflowBox组件，该组件会干扰网格布局的尺寸计算
• 给GridView.builder显式添加padding: EdgeInsets.zero参数，消除GridView自带的默认内边距
• 在SliverGridDelegateWithFixedCrossAxisCount中补全间距配置，添加crossAxisSpacing: 0、mainAxisSpacing: 0参数，覆盖默认的非零间距值
• 删除itemBuilder中包裹容器的外层Row和Padding(left:20)组件，人为添加的左侧边距是横向空隙的核心原因
• 无需手动指定网格项的宽高，通过SliverGridDelegateWithFixedCrossAxisCount的childAspectRatio参数控制网格项宽高比即可，避免手动设置尺寸剩余的空间转为间隙

修改后的网格部分代码参考：

Expanded(
  child: MediaQuery.removePadding(
    context: context,
    removeTop: true,
    child: GridView.builder(
      padding: EdgeInsets.zero,
      shrinkWrap: true,
      itemCount: info.length,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 0,
        mainAxisSpacing: 0,
        childAspectRatio: 1, // 可根据实际需求调整宽高比
      ),
      itemBuilder: (_, i) {
        return Container(
          // 如需保留均匀的小间距可加margin，不需要就删除
          margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(15),
            image: DecorationImage(
              image: AssetImage(info[i]["img"]),
            ),
            boxShadow: [
              BoxShadow(
                blurRadius: 3,
                offset: const Offset(5, 5),
                color: color.AppColor.gradientSecond.withOpacity(0.1),
              ),
            ],
          ),
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Text(
              info[i]["title"],
              style: TextStyle(
                fontSize: MediaQuery.of(context).size.width * 0.05,
                color: color.AppColor.homePageDetail,
              ),
            ),
          ),
        );
      },
    ),
  ),
)

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