Flutter:是否可以在高度 > 1.0 的文本行中设置垂直对齐?

Alt*_*ora 9 material-design flutter flutter-layout figma

Figma中的所有文本都有一定的高度,例如1.5,但是当我将该高度设置为TextStyle时,具有新高度的所有行都会与底部对齐。

看图片

如果使用居中对齐小部件 - 结果错误。示例的行中具有底部垂直对齐方式。就像底部的屏幕截图一样。

[文字截图2

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

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

解决方案:

正如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),
          ),
        ),
      ),
    );
Run Code Online (Sandbox Code Playgroud)

int*_*tor 20

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

Text(
    'text',
    style: TextStyle(
        height: 2.0,
        leadingDistribution: TextLeadingDistribution.even,
        ),
)
Run Code Online (Sandbox Code Playgroud)

来自评论:

修改该字段后,热重载不会生效,需要热重启

  • 注意:修改该字段后,热重载不会生效,需要热重启。 (7认同)
  • @ipcjs,你让我免于绞尽脑汁去弄清楚为什么这不起作用。 (2认同)