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

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

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

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

有时,即使没有设置填充,您也会在CSS中得到填充,但是您可以使用padding: 0删除它,但是由于找不到Text小部件的填充选项,因此我在这里看不到如何做。

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

最佳答案

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

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

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

如我们所见,使用其他字符(例如字母g和y以及带有重音符号的大写字母O)向我们展示了Text小部件确实没有填充。

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

有关Wikipedia上字体的更多信息

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

关于Flutter如何从“文本”小部件中删除不需要的填充?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57008822/

10-09 23:44
查看更多