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

Question

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

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

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

有时你会在 CSS 中得到它，即使没有设置任何填充，但你可以简单地使用 padding: 0 将其删除，但我不知道如何在此处执行，因为我找不到填充选项Text 小部件。

编辑：填充量随字体大小而变化。它似乎总是包含一定数量的填充，例如 html H1 标记。

Answer 1

消除不需要的填充的正确方法是在TextStyle 中设置height 属性。这样你就可以设置每一行的高度。

                  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 2

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

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

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

字体在某些字符上有 ascenders 和 descenders，并且还有 en ascent line 用于特殊字符，例如 accent marker。这就是为什么数字居中的原因。这不是 Flutter 方面的填充，而是排版设计（？）。也许你可以找到一种方法来解决你的问题，寻找一种没有升序和降序的字体。

更多关于字体的信息Wikipedia

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

Answer 3

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

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

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

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

Answer 4

有两个可能的原因：

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

• 来自父 Widget 的布局约束 - 您只包含 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 5

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

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

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 中的负填充，但实际上它是向下移动底部文本而不是向上移动的填充，否则它们会占用相同的空间。

Answer 7

在谷歌上搜索了一段时间后，我写了这个。 它有什么作用？它正在向下移动文本的位置 （不缩小）

import 'package:vector_math/vector_math_64.dart';
import 'package:flutter/material.dart';

class BaselineText extends StatefulWidget {
  final Widget child;
  BaselineText({this.child});

  @override
  _BaselineTextState createState() => _BaselineTextState();
}

class _BaselineTextState extends State<BaselineText> {
  GlobalKey _key = GlobalKey();

  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {}));
  }

  @override
  Widget build(BuildContext context) {
    final RenderBox renderBox = _key.currentContext?.findRenderObject();
    final height = renderBox?.size?.height ?? 0;
    return Baseline(
      baseline: 0,
      baselineType: TextBaseline.ideographic,
      key: _key,
      child: Transform(
        transform: Matrix4.translation(
          Vector3(0, height, 0),
        ),
        child: widget.child,
      ),
    );
  }
}

使用方法：

BaselineText(
   child: Text("something"),
)

完成！！！