Flutter：TextField富文本格式化及RenderParagraph获取方法咨询

一、实现富文本格式化 #

TextField默认支持纯文本输入，但可以通过重写buildTextSpan方法自定义富文本样式，以下是实时根据输入内容动态格式化的示例：

示例：高亮输入中的邮箱地址 #

class RichTextInput extends StatefulWidget {
  @override
  _RichTextInputState createState() => _RichTextInputState();
}

class _RichTextInputState extends State<RichTextInput> {
  final _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      decoration: const InputDecoration(hintText: "输入内容，邮箱会自动高亮"),
      // 自定义文本样式构建逻辑
      buildTextSpan: (context, baseStyle, cursorPos) {
        final text = _controller.text;
        final spans = <TextSpan>[];
        final emailPattern = RegExp(r'\b[\w.-]+@[\w.-]+\.\w+\b');
        int currentPos = 0;

        // 遍历所有匹配的邮箱
        for (final match in emailPattern.allMatches(text)) {
          // 添加非匹配区间的文本
          if (match.start > currentPos) {
            spans.add(TextSpan(text: text.substring(currentPos, match.start), style: baseStyle));
          }
          // 添加高亮的邮箱文本
          spans.add(TextSpan(
            text: match.group(0),
            style: baseStyle.copyWith(color: Colors.blue, fontWeight: FontWeight.w600),
          ));
          currentPos = match.end;
        }

        // 添加剩余未匹配的文本
        if (currentPos < text.length) {
          spans.add(TextSpan(text: text.substring(currentPos), style: baseStyle));
        }

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

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

如果需要更复杂的流式格式化（如代码语法高亮），可以将文本拆分为不同的语义token（关键字、变量、注释等），再为每个token分配对应样式，而非仅依赖正则匹配。

二、获取RenderParagraph计算文本位置 #

要获取TextField内部的RenderParagraph，需通过GlobalKey定位到TextField的RenderObject，再提取目标对象：

示例：计算指定文本索引的屏幕位置 #

class TextPositionHelper extends StatefulWidget {
  @override
  _TextPositionHelperState createState() => _TextPositionHelperState();
}

class _TextPositionHelperState extends State<TextPositionHelper> {
  final _textFieldKey = GlobalKey();
  final _controller = TextEditingController(text: "测试文本位置计算");

  void calculateTextPosition(int index) {
    final renderObj = _textFieldKey.currentContext?.findRenderObject();
    if (renderObj is RenderEditable) {
      final renderParagraph = renderObj.renderParagraph;
      if (renderParagraph != null) {
        // 获取指定索引的屏幕偏移
        final offset = renderParagraph.getOffsetForCaret(
          TextPosition(offset: index),
          Rect.zero,
        );
        // 获取指定索引的字符矩形区域
        final rect = renderParagraph.getRectForCaret(
          TextPosition(offset: index),
          Rect.zero,
        );
        print("索引$index的屏幕偏移：$offset，字符矩形：$rect");
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(key: _textFieldKey, controller: _controller),
        ElevatedButton(
          onPressed: () => calculateTextPosition(3), // 计算第4个字符（索引3）的位置
          child: const Text("获取第4个字符的屏幕位置"),
        ),
      ],
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

说明：

• TextField对应的RenderObject是RenderEditable，其内部的renderParagraph就是负责文本渲染的对象
• 使用getOffsetForCaret可获取指定文本索引的屏幕坐标偏移
• 使用getRectForCaret可获取该位置字符的矩形区域，用于定位或绘制辅助元素
• 需确保TextField已完成渲染后再调用计算逻辑（如按钮点击触发，而非initState直接调用）

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