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

Question

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

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

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

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

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

Answer 1

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

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

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

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

维基百科上有关字体的更多信息

结论：如果您想Text使用 Flutter 检查器选择小部件，并且在某些字符周围看不到空格，那是不可能的。

Answer 2

尝试通过在样式属性中设置高度来调整文本的行高。文本的高度根据字体大小确定。它将倍增字体大小并为您提供看起来有一些填充的空间。文本的行高也与字体本身相关，因为每种字体都有自己的行高。

child: Text(
        'Some text goes here',
        style: TextStyle(
          fontSize: 25.0,
          height: 1,
       ),
      )

Answer 3

有2个潜在原因：

• fontFamily - 尝试将其注释掉，看看您是否还有同样的问题。如果这是原因并且您绝对必须/想要使用这种特定字体，我不确定修复是什么，除了一些可怕的逻辑来相应地堆叠小部件以使其看起来没有填充。

• 来自父小部件的布局约束 - 您只包含了 Text 小部件的代码，但例如，如果它包含在一个 Column 内的 Expanded 小部件中，那也可以解释额外的高度（这里可能是错误的假设，因为文本不会居中无论如何，默认情况下它是垂直的，但是在层次结构中的某个地方可能会有一个 DefaultTextStyle 小部件，所以仍然可能......）

编辑：似乎文本周围有一些默认填充。

我发现您可以通过设置高度小于 1 的 TextStyle 来减少顶部填充。所需的值似乎取决于字体大小和文本本身，因为不同的字符具有不同的高度。

您还可以通过使用固定大小的容器裁剪文本来减少底部填充。这也将根据字体大小和文本本身而有所不同。下面是使用这两种方法将字体大小为 72 的文本 '0:00.00' 的顶部和底部填充减少到 0 的示例：

ClipRect(
  child: Container(
    height: 55,
    child: Text("0:00.00",
      style: TextStyle(
        fontSize: 72,
        height: 0.80,
      ),
    ),
  ),
),

我知道这是一个非常糟糕的解决方案，但我不知道有什么更好的解决方案。我尝试在 Text 小部件上使用自定义 StrutStyle ，但这也无济于事。

Answer 4

我想我找到了一个很好的解决方案/解决方法来删除顶部和底部填充。

诀窍是将您的文本放入容器中，然后更改文本内 TextStyle 的“高度”以及容器的高度。为获得完美的测量值需要来回走动，但 imo 是值得的。

这是我自己的代码中的一个示例。

              Container(
            height: 24,
            child: Text(
              'Auto',
              style: TextStyle(
                  height: 0.77,
                  fontSize: 32,
                  fontWeight: FontWeight.bold,
                  color: Colors.white),
              textAlign: TextAlign.center,
            ),

Answer 5

摆脱不需要的填充的正确方法是height在TextStyle. 有了这个，您可以设置每条线的高度。

                  Text(
                    "Let's make\nsome pancakes",
                    style: TextStyle(
                      height: 1.2, //SETTING THIS CAN SOLVE YOUR PROBLEM
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.w300,
                    ),
                    textAlign: TextAlign.center,
                  ),

事实上，我们可以从文档中确认：

对于大多数字体，将 height 设置为 1.0 与省略或将 height 设置为 null 不同，因为 fontSize 设置了 EM-square 的高度，这与字体提供的行高度量不同。

更多信息：https : //api.flutter.dev/flutter/painting/TextStyle/height.html

所以试试吧。它对我有用。

Answer 6

我自己最终找到了解决方案。Stack可以使用和小部件来定位它Row。我发现Row比使用效果更好Positioned，因为可以使用小部件将文本居中Row。

  body: Stack(
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            '0:00.00',
            style: TextStyle(fontSize: 76),
          ),
        ],
      ),
      Padding(
        padding: EdgeInsets.only(top: 56.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Coke',
              style: TextStyle(fontSize: 76),
            ),
          ],
        ),
      ),
    ],
  )

它的工作原理类似于CSS中的负填充，但实际上它是向下移动底部文本而不是向上移动的填充，因为否则它们占据相同的空间。