Flutter如何从TextFormField中提取GIF链接并替换为图片展示

实现方案 #

方案1：原生能力实现（无第三方依赖）

不需要完全继承重写TextFormField，Flutter 2.2+ 版本已经修复了WidgetSpan在输入框内的渲染错位问题，只需要自定义TextEditingController重写buildTextSpan方法即可，核心逻辑是将识别到的GIF链接文本替换为图片组件渲染，对用户隐藏原始URL。

自定义Controller代码示例：

class GifRenderingTextController extends TextEditingController {
  // 存储已识别的GIF链接，提交表单时可直接取出使用
  final List<String> detectedGifs = [];

  @override
  TextSpan buildTextSpan({required BuildContext context, TextStyle? style, required bool withComposing}) {
    final children = <InlineSpan>[];
    final inputText = text;
    // 适配绝大多数GIF链接格式的正则，可根据系统键盘输出的链接特征调整
    final gifRegex = RegExp(r'https?://\S+\.gif(\?\S*)?', caseSensitive: false);
    
    int lastMatchEnd = 0;
    gifRegex.allMatches(inputText).forEach((match) {
      // 插入匹配到GIF之前的普通文本
      if (match.start > lastMatchEnd) {
        children.add(TextSpan(
          text: inputText.substring(lastMatchEnd, match.start),
          style: style,
        ));
      }
      final gifUrl = match.group(0)!;
      if (!detectedGifs.contains(gifUrl)) detectedGifs.add(gifUrl);
      // 将GIF链接的文本位替换为图片组件
      children.add(WidgetSpan(
        alignment: PlaceholderAlignment.middle,
        child: Image.network(
          gifUrl,
          height: 24, // 可根据行高自定义尺寸
          width: 24,
          fit: BoxFit.contain,
          errorBuilder: (context, error, stackTrace) {
            // 图片加载失败时降级显示原始文本
            return Text(gifUrl, style: style);
          },
        ),
      ));
      lastMatchEnd = match.end;
    });
    // 插入剩余的普通文本
    if (lastMatchEnd < inputText.length) {
      children.add(TextSpan(
        text: inputText.substring(lastMatchEnd),
        style: style,
      ));
    }
    return TextSpan(style: style, children: children);
  }
}

使用方式：直接将你原来的commentaireTextController替换为上述自定义的GifRenderingTextController即可，无需修改原TextFormField的其他配置。
如果需要完全删除URL的文本占位，可在Controller的监听回调中匹配到GIF链接后，直接将URL从文本中移除，同时将GIF存入单独数组，渲染时固定插入对应位置即可，用户完全看不到原始URL。

方案2：第三方组件实现

如果需要支持更多富文本混输能力，可直接使用成熟的第三方组件：

• extended_text_field：专门针对输入框增强的组件，原生支持内嵌Widget、自定义文本匹配渲染，不用手动处理Span逻辑
• flutter_quill：富文本编辑器组件，开箱支持图片、GIF、表情混输，适合复杂的输入场景

版本兼容性说明 #

2021年之前无法实现的核心原因是旧版Flutter中EditableText对WidgetSpan的支持存在输入错位、光标计算错误的bug，该问题在Flutter 2.2（2021年5月发布）版本已经完全修复，上述方案在所有高于2.2的Flutter版本中均可稳定运行。

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