Flutter中如何缩小Column组件内Widget的垂直间距？

你遇到的问题核心不是Column的间距设置，而是Text组件自带的行高（leading）留白导致的。默认情况下，Text会根据字体（这里是Poppins）和字号自动添加上下留白，大字号的文本这个留白会更明显，所以即使你没加Padding/Margin，看起来间距还是很大。

解决方法：调整Text的行高（height属性） #

通过设置TextStyle的height参数，可以直接控制文本的行高与字号的比例，小于1的值会缩小行高，从而减少文本上下的留白，让Column里的文本间距更紧凑。

步骤1：修改自定义MyText组件，增加行高参数

给MyText添加可选的height参数，方便复用：

class MyText extends StatelessWidget {
  
  Color? color;
  final String text;
  double? size;
  FontWeight? weight;
  double? height; // 新增行高参数
  
  MyText({
    super.key,
    this.color = const Color(0xDEFFFFFF), 
    required this.text, 
    this.size=32, 
    this.weight= FontWeight.w400,
    this.height = 1.0, // 默认行高为1.0
  });

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: TextStyle(
        color: color,
        fontSize: size,
        fontWeight: weight,
        fontFamily: 'Poppins',
        height: height, // 应用行高设置
      ),
    );
  }
}

步骤2：在使用时调整每组Text的行高

针对不同字号的文本设置合适的height值，缩小留白：

Container(
  margin: EdgeInsets.only(top: 60, left: 30),
  alignment: Alignment.centerLeft,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      MyText(
        text: "Total Views", 
        size: 32, 
        weight: FontWeight.w600, 
        color: Color(0x66FFFFFF),
        height: 0.9, // 缩小上方文本的行高
      ),
      MyText(
        text: "89000", 
        size: 50, 
        weight: FontWeight.w600,
        height: 0.8, // 大字号文本用更小的行高，减少底部留白
      ),
      SizedBox(height: 16), // 可选：给两组数据之间加一点间距
      MyText(
        text: "Total Likes", 
        size: 32, 
        weight: FontWeight.w600, 
        color: Color(0x66FFFFFF),
        height: 0.9,
      ),
      MyText(
        text: "4800", 
        size: 50, 
        weight: FontWeight.w600,
        height: 0.8,
      ),
    ],
  ),
);

为什么之前的方法没用？ #

• 设置mainAxisSize: MainAxisSize.min只是让Column适应子组件高度，但子组件Text本身的高度包含了行高留白，所以无法解决核心问题。
• 给Text加外部Padding/Margin只能调整组件之间的外部间距，没法减少Text内部的行高留白。
• Stack组件会让元素重叠，不符合布局需求。

你可以根据实际视觉效果微调height的值（比如0.7~1.0之间），直到达到满意的间距。

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