Flutter：通过controller赋值后让多行TextField滚动至光标位置

要实现插入文本后自动滚动到光标位置，仅靠baseOffset无法得到正确的滚动位置，需要结合文本的渲染信息计算实际偏移。以下是具体实现方案：

步骤1：配置必要的控制器与参数 #

确保TextField同时绑定TextEditingController和ScrollController，并记录文本样式、TextField宽度等布局关键参数：

final TextEditingController controller = TextEditingController();
final ScrollController scrollController = ScrollController();
final TextStyle textStyle = const TextStyle(fontSize: 16, height: 1.5);
double textFieldWidth = 300; // 可通过LayoutBuilder获取TextField实际宽度

TextField的声明：

TextField(
  controller: controller,
  scrollController: scrollController,
  maxLines: null,
  style: textStyle,
  // 其他自定义属性
)

步骤2：修改插入文本方法，添加滚动触发逻辑 #

在原有插入文本的代码执行完成后，通过addPostFrameCallback确保渲染完成后再计算滚动位置：

void insertParam(String text, TextSelection selection) {
  // 保留你原有的文本插入逻辑
  final TextEditingValue value = controller.value;
  final int start = selection.baseOffset;
  int end = selection.extentOffset;
  if (selection.isValid) {
    String newText = '';
    if (value.selection.isCollapsed) {
      if (end > 0) {
        newText += value.text.substring(0, end);
      }
      newText += text;
      if (value.text.length > end) {
        newText += value.text.substring(end, value.text.length);
      }
    } else {
      newText = value.text.replaceRange(start, end, text);
      end = start;
    }
    controller.value = value.copyWith(
      text: newText,
      selection: selection.copyWith(
        baseOffset: end + text.length,
        extentOffset: end + text.length,
      ),
    );
  } else {
    controller.value = TextEditingValue(
      text: text,
      selection: TextSelection.fromPosition(TextPosition(offset: text.length)),
    );
  }

  // 新增：触发滚动到光标位置
  WidgetsBinding.instance.addPostFrameCallback((_) {
    _scrollToCursor();
  });
}

步骤3：实现滚动到光标的核心逻辑 #

通过TextPainter模拟文本布局，计算光标所在行的垂直偏移，再控制ScrollController滚动到目标位置：

void _scrollToCursor() {
  final TextEditingValue value = controller.value;
  if (value.selection.baseOffset < 0) return;

  // 构建TextPainter，模拟TextField的文本渲染逻辑
  final TextPainter textPainter = TextPainter(
    text: TextSpan(text: value.text, style: textStyle),
    textDirection: TextDirection.ltr,
    maxLines: null,
  )..layout(maxWidth: textFieldWidth);

  // 获取光标位置的垂直偏移
  final TextPosition cursorPosition = value.selection.base;
  final Offset cursorOffset = textPainter.getOffsetForCaret(cursorPosition, Rect.zero);
  final double cursorLineTop = cursorOffset.dy - textStyle.fontSize! * textStyle.height! / 2;

  // 获取TextField视口信息，计算滚动偏移
  final RenderBox renderBox = scrollController.context.findRenderObject() as RenderBox;
  final double viewportHeight = renderBox.size.height;
  final double currentScrollOffset = scrollController.offset;

  // 确保光标落在视口内
  if (cursorLineTop < currentScrollOffset) {
    scrollController.jumpTo(cursorLineTop);
  } else if (cursorLineTop > currentScrollOffset + viewportHeight - textStyle.fontSize! * textStyle.height!) {
    scrollController.jumpTo(cursorLineTop - viewportHeight + textStyle.fontSize! * textStyle.height!);
  }
}

关键说明 #

• TextPainter用于模拟TextField的文本换行、行高计算，从而得到光标相对于文本顶部的垂直位置。
• addPostFrameCallback确保在文本更新并完成UI渲染后再执行滚动逻辑，避免获取旧的渲染数据。
• 若无法确定TextField宽度，可使用LayoutBuilder包裹TextField，在builder回调中获取实际宽度并更新textFieldWidth。

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