如何垂直居中对齐Flutter中Text.rich()的内容？

你遇到的问题是Text.rich里的WidgetSpan（红、绿盒子）和文本无法垂直居中对齐，即使设置了PlaceholderAlignment.middle也没生效，核心原因是文本的行高默认由fontSize决定，当WidgetSpan的子组件高度超过行高时，middle对齐是基于行框的中间，导致视觉上不对齐。以下是两种可行的解决方案：

方案1：用StrutStyle统一行高（推荐） #

通过设置StrutStyle定义足够容纳最高Widget的行高，让PlaceholderAlignment.middle能正确生效：

@override
Widget build(BuildContext context) {
  const textStyle = TextStyle(color: Colors.black, fontSize: 30);
  // 最高Widget高度为40，行高设置为40与fontSize的比值
  const strutStyle = StrutStyle(height: 40/30);
  final testWidgetSpan1 = WidgetSpan(
    alignment: PlaceholderAlignment.middle,
    child: Container(height: 10, width: 10, color: Colors.red),
  );
  final testWidgetSpan2 = WidgetSpan(
    alignment: PlaceholderAlignment.middle,
    child: Container(height: 40, width: 40, color: Colors.green),
  );
  return Scaffold(
    body: Center(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        child: Text.rich(
          TextSpan(children: <InlineSpan>[
            testWidgetSpan1,
            const TextSpan(text: ' ', style: textStyle),
            const TextSpan(text: 'Dummy Text To test rich text in app', style: textStyle),
            const TextSpan(text: ' ', style: textStyle),
            testWidgetSpan2,
          ]),
          overflow: TextOverflow.ellipsis,
          maxLines: 2,
          softWrap: true,
          strutStyle: strutStyle, // 添加该行统一行高
        ),
      ),
    ),
  );
}

方案2：基于基线对齐并居中Widget #

如果不想调整整体行高，可以将WidgetSpan的对齐方式改为基线对齐，同时让Widget在自身范围内居中：

@override
Widget build(BuildContext context) {
  const textStyle = TextStyle(color: Colors.black, fontSize: 30);
  final testWidgetSpan1 = WidgetSpan(
    alignment: PlaceholderAlignment.baseline,
    baseline: TextBaseline.alphabetic,
    child: Center(child: Container(height: 10, width: 10, color: Colors.red)),
  );
  final testWidgetSpan2 = WidgetSpan(
    alignment: PlaceholderAlignment.baseline,
    baseline: TextBaseline.alphabetic,
    child: Center(child: Container(height: 40, width: 40, color: Colors.green)),
  );
  return Scaffold(
    body: Center(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        child: Text.rich(
          TextSpan(children: <InlineSpan>[
            testWidgetSpan1,
            const TextSpan(text: ' ', style: textStyle),
            const TextSpan(text: 'Dummy Text To test rich text in app', style: textStyle),
            const TextSpan(text: ' ', style: textStyle),
            testWidgetSpan2,
          ]),
          overflow: TextOverflow.ellipsis,
          maxLines: 2,
          softWrap: true,
        ),
      ),
    ),
  );
}

内容的提问来源于stack exchange，提问作者Shahbaz Hashmi