Flutter：是否可以在高度> 1.0 的文本行中设置垂直对齐方式？

Question

Figma 中的所有文本都有一些高度，例如 1.5，但是当我设置 height 到 TextStyle，所有具有新高度的行都与底部对齐。

如果使用 Center 或 Align 小部件 - 错误的结果。示例在其行中具有底部垂直对齐。喜欢底部的截图。

[

是否可以在 flutter Text wiget 中为每一行设置垂直对齐？或者也许有人有一些有用的提示来解决问题？

    Text(
      'Example\nExample',
      textAlign: TextAlign.center,
      style:TextStyle(
        height: 2.5,
        fontSize: 20,
      ),
    );

解法：

正如user1032613所建议的那样，这样的解决方案很有帮助。

    final text = 'Example Example\nExample Example';
    const double height = 2.5;
    const double textSize = 16.0;
    const double bottomPadding = (height * textSize - textSize) / 2;
    const double baseline = height * textSize - height * textSize / 4;
    final Widget textWidget = Container(
      color: const Color(0xFFFFFFFF),
      padding: const EdgeInsets.only(bottom: bottomPadding),
      child: Baseline(
        baselineType: TextBaseline.alphabetic,
        baseline: baseline,
        child: Text(
          text,
          style: const AppTextStyle(
            height: height,
            fontSize: textSize,
            color: const Color(0xFFaa3a3a),
          ),
        ),
      ),
    );

Answer 1

一种方式：

Align(
 alignment: Alignment.center, 
 child: Text("Text"),
),

另一种方式：


Center(
   child: Text("Hello World", textAlign: TextAlign.center,),
),

Answer 2

在使用自定义字体时，这是 Flutter 中一个很常见的问题。

我们团队目前使用的解决方案是使用 Padding 或 Baseline 小部件并手动调整文本以使其显示为垂直居中。

Answer 3

有一个名为 leadingDistribution 的属性可用于此目的：

Text(
    'text',
    style: TextStyle(
        height: 2.0,
        leadingDistribution: TextLeadingDistribution.even,
        ),
)

Flutter：是否可以在高度> 1.0 的文本行中设置垂直对齐方式？

Flutter: Is it possible to set vertical alignment in text lines at height> 1.0?

material-design

flutter

flutter-layout

figma