如何让RichText中WidgetSpan内的TextField与TextSpan垂直基线对齐？

要实现RichText里嵌套在WidgetSpan中的TextField与TextSpan文本的垂直基线对齐，需从WidgetSpan对齐规则和TextField样式精简两方面调整，具体方案如下：

核心调整要点 #

• 给WidgetSpan配置基线对齐属性，明确对齐到文本的字母基线
• 移除TextField默认输入装饰的多余内边距，避免占位高度偏移
• 统一TextField和TextSpan的文本样式（字体大小、行高），保证基线基准一致

修改后的完整代码 #

RichText(
  text: TextSpan(
    style: TextStyle(
      color: Colors.black,
      fontSize: 14, // 统一字体大小
      height: 1.2, // 统一行高
    ),
    children: [
      TextSpan(text: "Text1 "),
      WidgetSpan(
        alignment: PlaceholderAlignment.baseline, // 设置基线对齐规则
        baseline: TextBaseline.alphabetic, // 指定对齐到字母基线
        child: SizedBox(
          width: 50,
          child: TextField(
            decoration: InputDecoration.collapsed( // 用折叠装饰移除默认内边距
              hintText: "input",
              hintStyle: TextStyle(
                color: Colors.grey,
                fontSize: 14, // 和TextSpan字体大小匹配
                height: 1.2, // 和TextSpan行高匹配
              ),
            ),
            style: TextStyle(
              color: Colors.black,
              fontSize: 14, // 和TextSpan字体大小匹配
              height: 1.2, // 和TextSpan行高匹配
            ),
          ),
        ),
      ),
      TextSpan(text: " Text2")
    ],
  ),
)

代码说明 #

1. WidgetSpan对齐设置：通过alignment: PlaceholderAlignment.baseline和baseline: TextBaseline.alphabetic，让WidgetSpan的内容严格对齐到周围TextSpan的字母基线，这是对齐的核心逻辑。
2. TextField装饰精简：使用InputDecoration.collapsed替代默认装饰，彻底移除输入框上下左右的默认内边距，避免TextField整体高度被撑高导致偏移。
3. 样式统一：将TextField的输入文本、提示文本样式与TextSpan的样式（字体大小、行高）完全统一，确保基线的基准线高度一致，消除因字体差异带来的对齐偏差。

调整后，TextField的文本即可与前后TextSpan的文本精准对齐到同一垂直基线。

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