Flutter TextField中使用WidgetSpan后如何实现正常的文本编辑与删除？

阿华AIGC实验室

2026-4-21

看起来你遇到的问题是因为WidgetSpan在文本编辑控件里没有对应的「实体字符」，导致Flutter的文本系统没法正确计算光标位置和处理删除逻辑。我之前也踩过类似的坑，分享几个关键修复点：

问题根源

你当前的实现是直接把命令文本（比如<cmd>...</cmd>）留在text里，然后在buildTextSpan中把这段文本替换成WidgetSpan。但实际文本长度和显示的WidgetSpan长度不匹配（WidgetSpan显示成一个「块」，但文本里是一串字符），这就导致光标计算混乱，编辑时出现光标不动、跳回开头的问题。

解决方案核心思路

给WidgetSpan在实际文本中保留一个单个占位字符（比如Unicode的对象替换符\uFFFC，这是专门用来表示不可见的占位元素的），让文本系统认为这就是一个普通字符，这样光标移动、删除逻辑就和正常文本一致了。

具体修改步骤

1. 定义占位符常量

在你的控制器类里添加一个专属占位符：

const String _widgetSpanPlaceholder = '\uFFFC'; // 不可见的单个字符占位符

2. 预处理文本：把命令转换成占位符

当你需要设置包含WidgetSpan的文本时，把原来的<cmd>...</cmd>命令替换成这个占位符。比如原文本：

'<cmd>中译英 | 请讲下列中文翻译为英文: </cmd> this is normal'

要转换为：

'$_widgetSpanPlaceholder this is normal'

同时建议在控制器里维护一个映射（比如Map<int, String>），记录占位符的位置和对应的命令内容，这样后续生成WidgetSpan时能准确获取内容。

3. 修改buildTextSpan方法

现在在buildTextSpan里，找到所有占位符的位置，替换成对应的WidgetSpan：

@override
TextSpan buildTextSpan({
  required BuildContext context,
  TextStyle? style,
  required bool withComposing,
}) {
  final children = <InlineSpan>[];
  final textSegments = text.split(_widgetSpanPlaceholder);
  
  // 遍历分割后的文本段，穿插文本和WidgetSpan
  for (int i = 0; i < textSegments.length; i++) {
    // 添加普通文本段
    if (textSegments[i].isNotEmpty) {
      children.add(TextSpan(text: textSegments[i], style: style));
    }
    // 如果不是最后一段，后面跟着占位符，插入对应的WidgetSpan
    if (i < textSegments.length - 1) {
      // 从映射中获取当前占位符对应的命令内容，这里示例直接用固定内容
      final cmdContent = '中译英 | 请讲下列中文翻译为英文: ';
      children.add(WidgetSpan(
        child: GestureDetector(
          child: Padding(
            padding: const EdgeInsets.only(right: 5.0, top: 2.0, bottom: 2.0),
            child: ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(5.0)),
              child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 5),
                color: generateGradientColors(cmdContent.split(SPLIT_CMD_MID)[0])[0],
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Text(
                      cmdContent.split(SPLIT_CMD_MID)[0],
                      style: const TextStyle(color: Colors.white),
                    ),
                    const SizedBox(width: 5.0),
                    InkWell(
                      child: const Icon(Icons.close, size: 15.0, color: Colors.white),
                      onTap: () {
                        // 找到占位符位置并删除
                        final placeholderIndex = text.indexOf(_widgetSpanPlaceholder);
                        if (placeholderIndex != -1) {
                          final newText = text.replaceRange(placeholderIndex, placeholderIndex + 1, '');
                          value = TextEditingValue(
                            text: newText,
                            selection: TextSelection.collapsed(offset: placeholderIndex),
                          );
                        }
                      },
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ));
    }
  }
  
  return TextSpan(children: children, style: style);
}