Flutter如何实现输入框可编辑文本的下划线与可点击区域？

要同时满足自由编辑和**自定义样式标记（比如语法错误高亮）**的需求，不用纠结静态展示用的RichText，直接用下面两种靠谱方案：

方案一：自定义TextEditingController + TextField（原生实现，无依赖） #

TextField本身支持完整编辑能力，通过重写TextEditingController的buildTextSpan方法，就能给文本的不同片段设置自定义样式，完美适配语法检查场景。

具体实现步骤： #

1. 继承TextEditingController，重写buildTextSpan方法，在这里嵌入你的语法检查逻辑，给错误文本段设置特殊样式（比如红底、下划线）
2. 将自定义控制器绑定到TextField上，TextField会自动应用你设置的样式，同时保留所有原生编辑功能

代码示例： #

// 自定义语法高亮控制器
class SyntaxCheckController extends TextEditingController {
  // 模拟语法检查：把包含"错误"的词标红加下划线
  @override
  TextSpan buildTextSpan({
    required BuildContext context,
    TextStyle? style,
    required bool withComposing,
  }) {
    final defaultStyle = style ?? const TextStyle();
    final textSegments = text.split(' ');
    final spans = <TextSpan>[];

    for (final segment in textSegments) {
      if (segment.contains('错误')) {
        spans.add(
          TextSpan(
            text: '$segment ',
            style: defaultStyle.copyWith(
              color: Colors.red,
              decoration: TextDecoration.underline,
              decorationColor: Colors.red,
            ),
          ),
        );
      } else {
        spans.add(TextSpan(text: '$segment ', style: defaultStyle));
      }
    }

    return TextSpan(style: defaultStyle, children: spans);
  }
}

// 使用示例
class SyntaxCheckInput extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: SyntaxCheckController(),
      maxLines: null, // 支持多行编辑
      decoration: const InputDecoration(hintText: '输入文本，含"错误"的词会被标红'),
    );
  }
}

注意事项： #

• 语法检查逻辑建议做异步处理+防抖（Debounce），避免每输入一个字符就触发检查，导致UI卡顿
• 如果需要处理光标位置或文本选择的特殊逻辑，可以在控制器里监听text变化，手动调整光标状态

方案二：使用第三方富文本编辑包（快速开发复杂交互） #

如果你的语法检查工具需要更复杂的交互（比如点击错误文本弹出修正建议、插入格式标记等），可以直接用成熟的第三方包：

• flutter_quill：功能强大的富文本编辑器，支持自定义样式、文本格式、交互回调，适合需要复杂编辑能力的场景
• rich_text_editor：轻量的富文本编辑组件，专注于基础的样式编辑需求

这类包已经封装好了样式与编辑的兼容逻辑，不用自己处理底层的光标、文本选择问题，能节省大量开发时间。

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