Flutter Text widget中的StrutStyle是什么

Question

Flutter Text 小部件中的 StrutStyle 是什么？我读过 this documentation 但我无法理解其含义，尤其是 height、leading 和 fontSize 参数。

Answer 1

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

这是一张有助于形象化的图片：

左边的彩色矩形是支柱（尽管实际上支柱是没有宽度的）。该矩形的高度是最小行高。这条线不能再短了。不过可以再高点。

ascent 是从基线到文本顶部的距离（由字体定义，而不是任何特定的字形）
体面是从基线到文本底部的距离（由字体定义，而不是任何特定的字形）
行距（发音为 "ledding"，就像旧排字机在字体行之间使用的铅金属一样）是一行底部与下一行顶部之间的距离。在支柱中，一半放在顶部，一半放在底部。是图中的灰色区域。

您可以使用乘数更改支柱的垂直尺寸。

在StrutStyleclass中，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.

相同

strut 的想法来自 CSS，它是从 TeX 中获得的。

另见

Controlling text height using StrutStyle

Flutter Text widget中的StrutStyle是什么

What is the StrutStyle in the Flutter Text widget

dart

text-widget

flutter