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

flutter

dart

text-widget