flutter - Flutter Text 小部件中的 StrutStyle 是什么

Question

StrutStyleFlutter 小部件中有什么Text？我已阅读此文档，但无法理解其含义，尤其是height、leading和fontSize参数。

Answer 1

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

这是一张有助于可视化它的图像：

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

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

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

在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。

strut 的想法来自CSS，它来自 TeX。

也可以看看

• 使用 StrutStyle 控制文本高度