Flutter多行TextField键盘弹出后无法滚动聚焦末尾字符求助

问题根源在于设置resizeToAvoidBottomInset: false后，Scaffold不会自动调整布局适配键盘，且你的TextField未绑定可控制的滚动控制器，导致无法滚动到被键盘遮挡的光标位置。以下是不移动TextField布局前提下的修复方案：

核心修改点 #

1. 将StatelessWidget改为StatefulWidget，用于管理滚动控制器和焦点状态
2. 添加ScrollController控制TextField内部滚动，添加FocusNode监听焦点变化
3. 通过监听光标位置，自动滚动到被键盘遮挡的区域

完整修复代码 #

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

  @override
  State<StartPage> createState() => _StartPageState();
}

class _StartPageState extends State<StartPage> {
  final ScrollController _scrollController = ScrollController();
  final FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    _focusNode.addListener(_ensureCursorVisible);
  }

  void _ensureCursorVisible() {
    if (_focusNode.hasFocus) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        final renderObject = _focusContext?.findRenderObject() as RenderEditable?;
        if (renderObject == null) return;

        final cursorOffset = renderObject.localToGlobal(renderObject.selection.extentOffset);
        final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
        final screenHeight = MediaQuery.of(context).size.height;

        // 判断光标是否被键盘遮挡
        if (cursorOffset.dy + 20 > screenHeight - keyboardHeight) {
          final scrollOffset = cursorOffset.dy - (screenHeight - keyboardHeight) + 20;
          _scrollController.animateTo(
            _scrollController.offset + scrollOffset,
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeOut,
          );
        }
      });
    }
  }

  BuildContext? get _focusContext => _focusNode.context;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(title: const Text('TextField Test')),
      body: Column(
        children: [
          const SizedBox(height: 100),
          Container(
            height: 450,
            width: MediaQuery.of(context).size.width,
            padding: const EdgeInsetsDirectional.all(30),
            decoration: BoxDecoration(color: Colors.black12, borderRadius: BorderRadius.circular(20)),
            child: TextField(
              maxLines: null,
              expands: true,
              style: const TextStyle(fontSize: 30),
              decoration: const InputDecoration(
                hintText: 'Enter some text here',
                hintStyle: TextStyle(fontSize: 30),
                border: InputBorder.none,
              ),
              scrollController: _scrollController,
              focusNode: _focusNode,
            ),
          ),
        ],
      ),
    );
  }
}

关键说明 #

• ScrollController：绑定到TextField后，可精准控制内部滚动位置
• FocusNode监听：实时检测TextField的焦点状态，触发光标可见性检查
• WidgetsBinding.postFrameCallback：确保在布局渲染完成后再计算光标位置，避免获取错误的渲染信息

修改后，TextField的布局位置不会移动，键盘弹出时会自动滚动到光标所在区域，解决无法滚动和聚焦到最后字符的问题。

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