Flutter TextSpan 文本垂直居中技巧

在 Flutter 开发中，你可能经常需要将 TextSpan 中的文本垂直居中。这时，Baseline Widget 可以帮助你轻松实现。

Baseline Widget 简介

Baseline Widget 可以将其子 Widget 的基线与给定的 baseline 对齐。基线是文本绘制的参考线。

使用 Baseline Widget 实现 TextSpan 文本垂直居中

以下代码演示了如何使用 Baseline Widget 将 TextSpan 中的文本垂直居中：dartText.rich( TextSpan( text: 'Hello ', style: TextStyle(fontSize: 20), children: [ TextSpan( text: 'world', style: TextStyle(fontSize: 30), ), ], ), textScaleFactor: 1.5,).wrapWith( (context, child) => Baseline( baseline: 0, baselineType: TextBaseline.alphabetic, child: child, ),);

代码解释：

我们使用 Text.rich 创建了一个包含两个不同大小文本片段的 TextSpan。2. 使用 .wrapWith 方法将 TextSpan 包裹在一个 Baseline Widget 中。3. 在 Baseline Widget 中： - baseline 属性设置为 0，表示将子 Widget 的基线与父 Widget 的基线对齐。 - baselineType 属性设置为 TextBaseline.alphabetic，表示使用字母基线进行对齐。

通过以上步骤，我们就实现了 TextSpan 文本的垂直居中。

总结：

使用 Baseline Widget 可以方便地实现 Flutter 中 TextSpan 文本的垂直居中。