Flutter 如何从 Text 小部件中删除不需要的填充？

Question

我有一个 Text小部件，不知道为什么它似乎只有顶部和底部填充，即使我没有在代码中设置任何内容。这是来自默认的 Flutter 应用程序，我只是修改了字体大小。

  body: Center(
    child: Column(
      children: <Widget>[
        Text(
          '0:00.00',
          style: TextStyle(fontSize: 76),
        ),
      ],
    ),
  ),

这是突出显示的 Text 的屏幕截图Android Studio 中的小部件。真的没有其他东西添加任何填充，所以我不知道它为什么在那里。



有时你会在 CSS 中得到这个，即使没有设置填充，但你可以简单地使用 padding: 0 删除它。但我不知道如何在这里做，因为我找不到 Text 的填充选项小部件。

编辑:填充量随字体大小而变化。它似乎总是包含一定量的填充，就像一个 html H1标签。

Answer 1

Text是有原因的小部件有这个“填充”。考虑下一个例子:

Text(
  '123 gyÓ',
  style: TextStyle(
    fontSize: 40.0,
  ),
),

正如我们所看到的，使用其他字符，如字母 g 和 y 以及带有重音标记的大写 O，向我们表明 Text 上没有填充。小部件真的。

字体在某些字符上有上升和下降，并且还有用于特殊字符(如重音标记)的上升线。这就是为什么数字居中的原因。这不是 Flutter 方面的填充，而是排版设计(？)。也许你可以找到一种方法来对你的问题进行排序，通过寻找没有上升和下降的字体。

更多关于字体的信息，请访问 Wikipedia

结论:如果要选择Text带有 Flutter 检查器的小部件，并且在某些字符周围看不到空格，这是不可能的。