Flutter中如何消除GridView组件中列表项之间的间距？

问题根源 #

你遇到的间距并非来自padding、crossAxisSpacing或mainAxisSpacing，而是：

• 横向间距：SliverGridDelegateWithFixedCrossAxisCount会强制将每行空间平均分配给2个子项，短文本左右会出现大量空白，看起来像间距；
• 纵向间距：Text组件默认行高或子项未填满纵向空间，导致上下出现空白。

解决方案 #

方法一：用Wrap组件替代GridView（推荐）

Wrap会根据子项实际宽度自动排列，超出屏幕宽度时自动换行，完全贴合你要的紧凑排列需求：

Wrap(
  spacing: 0.0, // 子项横向间距，不需要设为0
  runSpacing: 0.0, // 行与行的纵向间距，不需要设为0
  children: list.map((item) => Text(item)).toList(),
)

方法二：保留GridView并调整布局

如果必须使用GridView，需要调整布局代理和子项对齐方式，让子项宽度适配文本内容：

GridView.builder(
  padding: EdgeInsets.zero,
  itemCount: list.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 0,
    mainAxisSpacing: 0,
    childAspectRatio: 4.0, // 根据文本长度调整比例，让宽度适配内容
  ),
  itemBuilder: (BuildContext context, int index) {
    return Align(
      alignment: Alignment.centerLeft, // 文本左对齐，消除子项内的空白
      child: Text(list[index]),
    );
  },
)

注意：childAspectRatio需要根据你的文本长度手动调整，灵活性不如Wrap。

额外检查 #

确保GridView的父组件没有设置额外的padding或margin，避免引入多余间距。

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