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

有一个名为

leadingDistribution

 的属性可用于：

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

来自评论：

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

Answer 2

这是 Flutter 使用自定义字体时很常见的问题。

我们团队当前使用的解决方案是使用

Padding

 或 

Baseline

 小部件并手动调整文本以使其显示垂直居中。

Answer 3

这可以通过设置

textHeightBehavior

 的 

Text

 属性来完成。

          Text(
            'text',
            style: TextStyle(
              color: Colors.black,
              height: 16 / 12,
            ),
            textHeightBehavior: const TextHeightBehavior(
              applyHeightToFirstAscent: true,
              applyHeightToLastDescent: true,
              leadingDistribution: TextLeadingDistribution.even,
            ),
          ),

最重要的是将

leadingDistribution

 设置为 

TextLeadingDistribution.even

。

Answer 4

我有点晚了，但也许我的回答对某人有帮助。 我有一个里面有元素的专栏：

     ...
     Text(
          _locale.nutritionEditDishTimeTitle.toUpperCase(),
          textAlign: TextAlign.end,
          style: TextStyle(
            color: Palette.codGray,
            fontWeight: FontWeight.bold,
            fontSize: ScreenUtil().setSp(18),
            fontFamily: "Geometria",
          ),
        ),
      Spacer(flex: 15),
...

进行此更改后，问题就消失了：

     ...
       SizedBox(
                height: ScreenUtil().setSp(20) * MediaQuery.textScaleFactorOf(context),
                 child: Align(
                 alignment: Alignment.bottomCenter,
                  child: Text(
                _locale.nutritionEditDishTimeTitle.toUpperCase(),
                  textAlign: TextAlign.end,
                  style: TextStyle(
                    color: Palette.codGray,
                    fontWeight: FontWeight.bold,
                    fontSize: ScreenUtil().setSp(18),
                    fontFamily: "Geometria",
                  ),
                ),
              ),
),
              Spacer(flex: 15),
    ...

文字换行，大小变正常：

Answer 5

一种方法：

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

另一种方式：

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