Flutter Text小部件中的StrutStyle是什么

Question

Flutter StrutStyle小部件中的Text是什么？我已经读过this documentation，但在理解含义方面有困难，尤其是height，leading和fontSize参数。

我的回答如下。

Answer 1

您可以将StrutStyle视为Text小部件中文本的最小行高。 documentation是一个很好的起点。

以下是有助于形象化的图像：

左侧的彩色矩形是支柱（尽管实际上支柱没有宽度）。该矩形的高度是最小线条高度。该行不能短于该行。但它可以更高。

• 上升是从基线到文本顶部的距离（由字体定义，而不是任何特定的字形）
• 体面是从基线到文本底部的距离（由字体定义，而不是任何特定的字形）
• 行距（发音为“铅”，如旧的排字机用来在字体行之间使用的铅金属）是一行的底部与下一行的顶部之间的距离。在支柱中，一半的领先者放在顶部，另一半则放在底部。这是插图中的灰色区域。

您可以使用倍增器更改支柱的垂直大小。

在StrutStyle类中，height参数是上升和下降的乘数。在图示中，高度约为1.7，使绿色上升和粉红色下降成比例地大于原始图像。前导高度倍增器可以单独控制。您使用leading参数进行设置。不过，我使用了与上升和下降相同的乘数。基线保持不变。

const Text(
  'My text',            // use 'My text \nMy text' to see multiple lines
  style: TextStyle(
    fontSize: 10,
    fontFamily: 'Roboto',
  ),
  strutStyle: StrutStyle(
    fontFamily: 'Roboto',
    fontSize: 14,
    height: 1.7,
    leading: 1.7,
  ),
),

fontFamily和fontSize之类的其他设置仅定义了要使用高度倍数的字体指标。另外请注意，TextStyle不必与StrutStyle相同。

支撑的想法来自CSS，它来自TeX。

另请参见

• Controlling text height using StrutStyle