Flutter实现垂直显示分秒的Timer组件及移除文本间多余垂直间距问题

嘿，我来帮你搞定这个文本间距的问题！你遇到的多余垂直空间，主要来自两个地方：

1. Text组件默认的行高（leading）：即使是单行文本，Text也会保留基于字体大小的默认行高，这会在文本上下产生留白。
2. 字体本身的排版留白：你使用的Alfa Slab One是一款装饰性字体，字形本身上下就带有额外的设计留白，叠加Text的默认行高后，间距就会显得特别明显。

下面给你几个实用的解决方案，一步步帮你去掉多余间距：

方案1：调整Text的行高（最直接有效） #

在你的clockStyle里添加height参数，通过缩小行高来砍掉文本上下的多余留白：

TextStyle clockStyle = GoogleFonts.alfaSlabOne(
  fontSize: 100,
  height: 0.8, // 数值可以根据实际效果微调，比如0.7~0.9之间
);

这里的height是相对于字体大小的倍数，比如设置为0.8，行高就会变成字体大小的80%，直接压缩文本的上下留白。

方案2：让Column仅包裹子组件 #

给你的Column添加mainAxisSize: MainAxisSize.min，避免Column自动拉伸到父组件的高度，减少不必要的空间：

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisAlignment: MainAxisAlignment.center,
  mainAxisSize: MainAxisSize.min, // 关键：让Column只占用子组件需要的最小高度
  children: [
    Text(
      "30",
      style: clockStyle,
    ),
    Text(
      "26",
      style: clockStyle,
    ),
  ],
),

另外，你原来的Align组件是多余的——因为Column已经设置了crossAxisAlignment: CrossAxisAlignment.center，直接放Text就会自动居中，不需要额外嵌套Align，这也能减少一点不必要的层级和空间。

方案3：用StrutStyle精细控制排版（进阶） #

如果调整行高后还是有细微间距，可以用StrutStyle更精准地控制文本的基线和行高：

Text(
  "30",
  style: clockStyle.copyWith(
    strutStyle: const StrutStyle(
      height: 0.8,
      leading: 0, // 强制去掉行高的额外前置留白
    ),
  ),
),

修改后的完整代码 #

把上面的优化点整合起来，最终代码如下：

return SizedBox(
  height: 300,
  width: 300,
  child: CircleProgressBar(
    foregroundColor: Colors.blue,
    backgroundColor: Colors.black12,
    value: 0.0,
    child: Center(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            "30",
            style: GoogleFonts.alfaSlabOne(
              fontSize: 100,
              height: 0.8,
            ),
          ),
          Text(
            "26",
            style: GoogleFonts.alfaSlabOne(
              fontSize: 100,
              height: 0.8,
            ),
          ),
        ],
      ),
    ),
  ),
);

这样修改后，两个文本之间的多余垂直空间就会被去掉，完美实现你想要的垂直分秒显示效果啦！

备注：内容来源于stack exchange，提问作者Haider Nawaz