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

去除不需要的填充的正确方法是在 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 2

有两个潜在原因：

fontFamily-尝试将其注释掉，看看是否仍然存在相同的问题。如果这是原因，并且您绝对必须/想要使用此特定字体，那么我不知道要解决的问题，除了一些可怕的逻辑来相应地堆叠小部件以使它看起来没有填充之外。
< / li> 父窗口小部件的
布局限制-您仅包含了文本窗口小部件的代码，但是例如，如果将其包装在“列”中的“扩展”窗口小部件中，这也可以解释额外的高度（这里可能是错误的假设，因为默认情况下，文本不会自动垂直居中，但是在层次结构中可能仍存在一个DefaultTextStyle小部件，因此还是可以的。...）

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

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

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

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

我知道这是一个非常差的解决方案，但我不知道有任何更好的解决方案。我尝试在“文本”窗口小部件上使用自定义StrutStyle，但这也无济于事。

Answer 3

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

技巧是将文本放入容器中，然后在文本内更改TextStyle的“高度”以及容器的高度。进行完美测量需要花费一些时间，但值得这样做。

这是我自己的代码中的Example（点击链接以查看结果）。

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

Answer 4

Text小部件具有此“填充”的原因有很多。考虑下一个示例：

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

我们可以看到，使用字母g和y等其他字符以及带有重音符号的大写O告诉我们Text小部件上实际上没有填充。

字体在某些字符上带有上升沿和下降沿，并且还有上升行用于特殊字符，例如重音标记< / em>。因此，数字居中。这不是Flutter方面的内容，而是印刷设计（？）。也许您可以找到一种没有升序和降序的字体来对问题进行排序。

有关Wikipedia上字体的更多信息

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

Answer 5

尝试通过在样式属性中设置高度来播放文本的行高。文本的高度取决于字体大小。它将放大字体大小，并为您提供看起来有些填充的空间。文本的行高也链接到字体本身，因为每种字体都有其自己的行高。

type

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"),
)

完成！

Flutter如何从“文本”小部件中删除不需要的填充？

7 个答案: