Flutter开发中如何移除Column组件子元素之间的多余空白？

问题原因 #

你遇到的多余空白主要来自Divider组件的默认配置：Flutter 中Divider的height属性默认值为16，该属性代表Divider组件整体的占用高度，而分割线本身的厚度由thickness属性控制（默认值为1），因此上下会自动填充剩余高度作为留白，这就是你没有手动设置间距却出现空白的核心原因。

解决方法 #

给你代码中所有的Divider新增height属性，将其值设置为和分割线厚度一致即可消除额外留白，修改后的Divider示例如下：

Divider(
  color: Colors.black,
  indent: 25,
  endIndent: 25,
  height: 1, // 新增该行，与默认thickness值一致，消除上下留白
)

如果修改后仍存在细微间距，可给每个列表对应的Row组件设置固定高度，避免Text组件的默认行高自动撑开产生多余空白：

Row(
  height: 42, // 可根据视觉效果调整数值
  children: [
    SizedBox(width: 50,),
    Text('Restaurant', style: TextStyle(fontSize: 15)),
    Expanded(child: SizedBox()),
    Icon(Icons.keyboard_arrow_right),
    SizedBox(width: 40,)
  ],
)

可选优化建议 #

你当前代码存在大量结构完全相同的Row、Divider和分类标题组件，可以将这三类结构分别抽取为独立的公共组件，仅需要传入文本参数即可生成对应模块，能大幅降低代码冗余度，也方便后续统一调整样式。

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