Flutter TextField如何实现滚动时保持光标始终处于可视区域

核心思路 #

• 绑定专属的TextEditingController监听输入内容和光标位置变化
• 绑定ScrollController控制TextField的滚动行为
• 通过RenderEditable获取光标实时坐标，判断光标是否超出当前可视范围
• 超出边界时自动调用滚动方法将光标移动到可视区域内

完整实现代码 #

import 'package:flutter/material.dart';

class AutoScrollTextField extends StatefulWidget {
  const AutoScrollTextField({super.key});

  @override
  State<AutoScrollTextField> createState() => _AutoScrollTextFieldState();
}

class _AutoScrollTextFieldState extends State<AutoScrollTextField> {
  final TextEditingController _textController = TextEditingController();
  final ScrollController _scrollController = ScrollController();
  final GlobalKey _textFieldKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    _textController.addListener(_checkCursorPosition);
  }

  void _checkCursorPosition() {
    final selection = _textController.selection;
    if (!selection.isValid) return;

    final renderBox = _textFieldKey.currentContext?.findRenderObject() as RenderBox?;
    final renderEditable = renderBox?.findAncestorRenderObjectOfType<RenderEditable>();
    if (renderEditable == null || !renderEditable.hasSize) return;

    final cursorRect = renderEditable.getLocalRectForCaret(selection.base);
    final viewportTop = _scrollController.offset;
    final viewportBottom = viewportTop + renderEditable.size.height;

    if (cursorRect.top < viewportTop) {
      _scrollController.jumpTo(cursorRect.top);
    } else if (cursorRect.bottom > viewportBottom) {
      _scrollController.jumpTo(cursorRect.bottom - renderEditable.size.height);
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      // 可根据需求调整输入框最大高度
      constraints: const BoxConstraints(maxHeight: 150),
      child: TextField(
        key: _textFieldKey,
        controller: _textController,
        scrollController: _scrollController,
        maxLines: null,
        decoration: const InputDecoration(
          border: OutlineInputBorder(),
          hintText: '请输入内容',
        ),
      ),
    );
  }
}

优化说明 #

• 如需平滑滚动效果，将代码中的jumpTo替换为animateTo即可自定义滚动动画时长和曲线
• 代码默认适配文字输入删除、光标移动、文本选中等所有触发光标位置变化的场景
• 可以直接配合Scaffold自带的软键盘避让逻辑使用，无需额外适配

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