Flutter TextField获得焦点时如何禁止自动滚动到光标位置

这个自动滚动是Flutter内置EditableText组件的默认行为：输入框获得焦点时会自动调用ensureVisible方法将光标所在位置滚动到可视区域内，关闭enableInteractiveSelection属性不会影响该逻辑。以下是两种可直接落地的实现方案：

方案1：FocusNode + ScrollController 锁定滚动位置 #

该方案侵入性最低，无需修改源码，适合单个页面场景：

• 首先定义所需控制器：

// 输入框内容控制器
final TextEditingController _textController = TextEditingController();
// 焦点控制器
final FocusNode _focusNode = FocusNode();
// 输入框滚动控制器
final ScrollController _scrollController = ScrollController();
// 存储失焦状态下的滚动偏移
double _lastScrollOffset = 0.0;

• 在initState中绑定监听逻辑：

@override
void initState() {
  super.initState();
  // 监听滚动事件，保存非聚焦状态下的滚动位置
  _scrollController.addListener(() {
    if (!_focusNode.hasFocus) {
      _lastScrollOffset = _scrollController.offset;
    }
  });
  // 监听焦点变化，覆盖默认滚动逻辑
  _focusNode.addListener(() {
    if (_focusNode.hasFocus) {
      // 等待默认滚动逻辑执行完成后，跳转到之前保存的位置
      WidgetsBinding.instance.addPostFrameCallback((_) {
        if (_scrollController.hasClients) {
          _scrollController.jumpTo(_lastScrollOffset);
        }
      });
    }
  });
}

• 将控制器绑定到TextField即可：

TextField(
  controller: _textController,
  focusNode: _focusNode,
  scrollController: _scrollController,
  enableInteractiveSelection: false,
  maxLines: null,
  // 其余原有配置保持不变
)

• 组件销毁时释放控制器避免内存泄漏：

@override
void dispose() {
  _textController.dispose();
  _focusNode.dispose();
  _scrollController.dispose();
  super.dispose();
}

方案2：自定义组件全局禁用自动滚动 #

如果需要全局禁用该行为，可以重写EditableText的滚动逻辑：

class NoAutoScrollEditableText extends EditableText {
  NoAutoScrollEditableText({
    super.key,
    required super.controller,
    required super.focusNode,
    required super.style,
    required super.cursorColor,
    required super.backgroundCursorColor,
    // 其余所需参数可自行补充
  });

  @override
  void bringIntoView(TextPosition position) {
    // 空实现，直接禁止默认滚动到光标位置的逻辑
  }
}

你可以再封装一层自定义TextField，将内部的EditableText替换为上述自定义版本即可复用。

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