Flutter：如何实现TextField光标被遮挡时按需滚动显示？

你当前代码的问题在于设置了reverse: true和固定的底部内边距，导致内容始终贴紧键盘底部，而非仅在光标被遮挡时滚动。以下是两种可行的解决方案：

方案一：手动监听光标位置，按需滚动 #

通过监听焦点和文本变化，判断光标是否超出键盘上方的可见区域，仅在需要时触发滚动。

首先在State类中初始化控制器并添加监听：

late final TextEditingController _textEditingController;
late final FocusNode _focusNode;
late final ScrollController _scrollController;

@override
void initState() {
  super.initState();
  _textEditingController = TextEditingController();
  _focusNode = FocusNode();
  _scrollController = ScrollController();

  _focusNode.addListener(_ensureCursorVisible);
  _textEditingController.addListener(_ensureCursorVisible);
}

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

添加核心滚动判断方法：

void _ensureCursorVisible() {
  if (!_focusNode.hasFocus) return;
  
  final textFieldRender = _focusNode.context?.findRenderObject() as RenderBox?;
  if (textFieldRender == null) return;

  // 获取光标全局位置
  final cursorOffset = textFieldRender.getOffsetForCaret(
    _textEditingController.selection,
    Rect.zero,
  );
  final cursorGlobalPos = textFieldRender.localToGlobal(cursorOffset);

  // 计算键盘上方的可见区域底部
  final viewInsets = MediaQuery.of(context).viewInsets.bottom;
  final visibleBottom = MediaQuery.of(context).size.height - viewInsets;

  // 光标底部超出可见区域时，滚动到可见位置
  final cursorBottom = cursorGlobalPos.dy + 20; // 20为光标高度预估，可调整
  if (cursorBottom > visibleBottom) {
    _scrollController.animateTo(
      _scrollController.offset + (cursorBottom - visibleBottom),
      duration: const Duration(milliseconds: 200),
      curve: Curves.easeOut,
    );
  }
}

修改UI部分：

Expanded(
  child: SingleChildScrollView(
    physics: const ClampingScrollPhysics(),
    controller: _scrollController,
    // 移除reverse: true，让文本从上到下正常排列
    child: TextField(
      controller: _textEditingController,
      selectionControls: MaterialTextSelectionControls(),
      focusNode: _focusNode,
      keyboardType: TextInputType.multiline,
      maxLines: null,
      autofocus: true,
      decoration: const InputDecoration(border: InputBorder.none),
      onChanged: (value) {
        newDescription = value.trim();
      },
    ),
  ),
)

方案二：利用Flutter内置布局适配（简化版） #

如果页面基于Scaffold，直接依赖其内置的键盘适配机制即可，无需手动监听：

Scaffold(
  resizeToAvoidBottomInset: true, // 默认开启，确保不手动关闭
  body: Column(
    children: [
      // 顶部其他组件
      Expanded(
        child: SingleChildScrollView(
          physics: const ClampingScrollPhysics(),
          controller: _scrollController,
          child: TextField(
            controller: _textEditingController,
            focusNode: _focusNode,
            keyboardType: TextInputType.multiline,
            maxLines: null,
            autofocus: true,
            decoration: const InputDecoration(border: InputBorder.none),
            onChanged: (value) {
              newDescription = value.trim();
            },
          ),
        ),
      ),
    ],
  ),
)

关键修改说明 #

• 移除reverse: true：避免文本从底部开始排列，导致光标默认停留在键盘上方
• 删除固定底部内边距：防止内容强制上移，仅在光标被遮挡时触发滚动
• 利用Scaffold的resizeToAvoidBottomInset：让Flutter自动处理键盘弹出时的布局偏移，配合SingleChildScrollView实现自动滚动

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