Flutter如何从“文本"小部件中删除不需要的填充? [英] Flutter how do I remove unwanted padding from Text widget?

问题描述

我有一个Text小部件，虽然我没有在代码中进行任何设置，但不确定为什么它似乎仅在顶部和底部填充了空白.这是来自默认的Flutter应用程序，我刚刚修改了字体大小.

I have a Text widget and not sure why it seems to just have padding at the top and bottom even though I didn't set any in the code. This is from the default Flutter app, I just modified the font size.

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

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

This is a screenshot of the highlighted Text widget in Android Studio. There's really nothing else adding any padding so I don't know why it's there.

有时候，即使没有设置填充，您也可以在CSS中获得填充，但是您可以使用padding: 0简单地将其删除，但是由于找不到填充选项，因此我在这里看不到如何做Text小部件.

Sometimes you get this in CSS where there is padding even though none was set but you can remove it simply with padding: 0 but I don't see how to do it here since I can't find a padding option for the Text widget.

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

The amount of padding changes with the size of the font. It seems to always contain a certain amount of padding, like a html H1 tag.

推荐答案

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

I found the solution myself in the end. It can be positioned using Stack and Row widgets. I found Row works better than using Positioned as the text can be centred using the Row widgets.

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

It kind of works like the negative padding in CSS but actually it's the padding that moves the bottom text down rather than up since otherwise they occupy the same space.

这篇关于Flutter如何从“文本"小部件中删除不需要的填充?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！