Flutter只读TextField设置光标到文本末尾的优化方案

方案一：用ScrollController直接计算滚动位置（无需修改readonly状态） #

既然readonly状态下设置光标无效，那我们直接控制滚动条的位置就行。核心思路是计算文本的总宽度，然后让ScrollController滚动到文本末尾对应的偏移量。

1. 给TextField绑定ScrollController和TextEditingController：

final TextEditingController exportFolderPathController = TextEditingController();
final ScrollController _scrollController = ScrollController();

// TextField组件
TextField(
  controller: exportFolderPathController,
  scrollController: _scrollController,
  readOnly: true,
  maxLines: 1, // 多行文本可调整此参数
  decoration: const InputDecoration(
    border: OutlineInputBorder(),
    hintText: '请输入路径',
  ),
)

2. 设置文本后，计算宽度并滚动到末尾：

void updateTextAndScrollToEnd(String newText) {
  exportFolderPathController.text = newText;

  // 用TextPainter计算文本实际宽度
  final textPainter = TextPainter(
    text: TextSpan(
      text: newText,
      style: DefaultTextStyle.of(context).style, // 匹配TextField实际样式更准确
    ),
    textDirection: TextDirection.ltr,
  )..layout(minWidth: 0, maxWidth: double.infinity);

  final textTotalWidth = textPainter.width;
  // 根据你的布局调整TextField可视宽度（示例左右各20边距）
  final fieldVisibleWidth = MediaQuery.of(context).size.width - 40;

  if (textTotalWidth > fieldVisibleWidth) {
    // 直接跳转到末尾，平滑滚动可替换为animateTo
    _scrollController.jumpTo(textTotalWidth - fieldVisibleWidth);
  } else {
    _scrollController.jumpTo(0);
  }
}

方案二：用SchedulerBinding替代Future.delayed（更可靠的临时修改readonly方案） #

如果想通过设置光标触发滚动，用SchedulerBinding的addPostFrameCallback替代硬编码延迟的Future.delayed，它会在UI帧绘制完成后执行，稳定性更高。

1. 定义状态变量控制readonly：

bool _isReadOnly = true;

2. 更新文本并调整光标位置：

void updateTextAndSetCursor(String newText) {
  // 临时关闭readonly
  setState(() {
    _isReadOnly = false;
  });

  exportFolderPathController.text = newText;

  // 帧绘制完成后设置光标，再恢复readonly
  SchedulerBinding.instance.addPostFrameCallback((_) {
    exportFolderPathController.selection = TextSelection.collapsed(
      offset: exportFolderPathController.text.length,
    );
    setState(() {
      _isReadOnly = true;
    });
  });
}

为什么原方法无效？ #

查看Flutter源码的_EditableState.updateEditingValue方法可知：当readonly为true时，会直接忽略传入的selection参数，所以直接设置光标位置不会生效。

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