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

发布于07月13日

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

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

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

有时在CSS中会出现这种情况，即使没有设置任何填充，但只需使用padding: 0就可以将其删除，但我不知道如何在这里执行此操作，因为我找不到Text小部件的填充选项.

编辑:填充量随字体大小而变化.它似乎总是包含一定量的填充，比如HTMLH1标记.

推荐答案

我最终自己找到了解决方案.它可以使用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中的负值填充，但实际上是填充将底部文本向下移动而不是向上移动，否则它们占据相同的空间.