Flutter中TextField获焦时底部溢出问题的解决咨询

方案一：正常显示键盘且无溢出 #

核心是让页面内容支持滚动，同时让Scaffold自动适配键盘高度，避免溢出。

场景1：TextField随内容滚动（不固定在底部） #

把原有Column包裹在SingleChildScrollView中，键盘弹出时内容可向上滚动：

return Scaffold(
  key: scaffoldKey,
  body: SafeArea(
    child: SingleChildScrollView(
      child: Column(
        children: [
          Text("Test"),
          // 保留你原来的其他Text组件
          TextField()
        ],
      ),
    ),
  ),
);

场景2：TextField固定在底部，上方内容滚动 #

如果需要TextField始终贴在屏幕底部，用Stack布局实现：

return Scaffold(
  key: scaffoldKey,
  body: SafeArea(
    child: Stack(
      children: [
        // 上方可滚动内容
        SingleChildScrollView(
          child: Column(
            children: [
              Text("Test"),
              // 其他Text组件
            ],
          ),
        ),
        // 底部固定的TextField
        Align(
          alignment: Alignment.bottomCenter,
          child: TextField(),
        ),
      ],
    ),
  ),
);

方案二：切换为仅显示TextField的空白页面 #

通过监听焦点或键盘状态，动态切换布局，模拟安卓横屏空间不足时的效果：

实现代码 #

import 'package:flutter/material.dart';

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

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  bool _showOnlyTextField = false;
  final FocusNode _textFieldFocusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    // 监听TextField焦点变化
    _textFieldFocusNode.addListener(() {
      setState(() {
        _showOnlyTextField = _textFieldFocusNode.hasFocus;
      });
    });
  }

  @override
  void dispose() {
    _textFieldFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      body: SafeArea(
        child: _showOnlyTextField
            ? // 仅显示TextField的空白页面
            Center(
                child: TextField(
                  focusNode: _textFieldFocusNode,
                  autofocus: true,
                ),
              )
            : // 原布局
            Column(
                children: [
                  Text("Test"),
                  // 其他Text组件
                  TextField(
                    focusNode: _textFieldFocusNode,
                  ),
                ],
              ),
      ),
    );
  }
}

更精准的键盘状态监听（可选） #

如果要准确判断键盘是否弹出，可通过系统视图变化监听：

@override
void didChangeMetrics() {
  super.didChangeMetrics();
  final bottomInset = MediaQuery.of(context).viewInsets.bottom;
  setState(() {
    _showOnlyTextField = bottomInset > 0;
  });
}

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