Flutter底部TextFormField获焦后键盘弹出即关闭的解决方法

针对你遇到的键盘触发重绘导致底部输入框丢失焦点的问题，这里有几个实用的解决思路：

1. 给输入框绑定独立的FocusNode并手动管理焦点 #

通过显式创建FocusNode，在输入框获焦时主动保留焦点状态，避免重绘时丢失：

class _YourPageState extends State<YourPage> {
  late FocusNode _bottomFieldFocusNode;

  @override
  void initState() {
    super.initState();
    _bottomFieldFocusNode = FocusNode();
    // 监听焦点变化，若意外丢失可尝试重新获取
    _bottomFieldFocusNode.addListener(() {
      if (_bottomFieldFocusNode.hasFocus == false) {
        // 延迟一点再请求焦点，避免和重绘时机冲突
        Future.delayed(const Duration(milliseconds: 100), () {
          _bottomFieldFocusNode.requestFocus();
        });
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextFormField(hintText: "顶部输入框"),
          const Spacer(),
          TextFormField(
            focusNode: _bottomFieldFocusNode,
            hintText: "底部输入框",
          ),
        ],
      ),
    );
  }
}

2. 用GlobalKey固定子Widget状态，避免不必要重建 #

如果底部输入框所在的子Widget因父Widget重绘被重建，给该子Widget添加GlobalKey，让Flutter保留其状态：

class YourPage extends StatefulWidget {
  @override
  State<YourPage> createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  // 给底部输入区域的Widget创建GlobalKey
  final GlobalKey<_BottomInputAreaState> _bottomAreaKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextFormField(hintText: "顶部输入框"),
          const Spacer(),
          BottomInputArea(key: _bottomAreaKey),
        ],
      ),
    );
  }
}

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

  @override
  State<BottomInputArea> createState() => _BottomInputAreaState();
}

class _BottomInputAreaState extends State<BottomInputArea> {
  @override
  Widget build(BuildContext context) {
    return TextFormField(hintText: "底部输入框");
  }
}

3. 使用AutomaticKeepAliveClientMixin保持Widget状态 #

如果输入框在滚动视图（如ListView、CustomScrollView）内，用这个Mixin阻止Widget因滚动或布局变化被销毁重建：

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

  @override
  State<BottomInputArea> createState() => _BottomInputAreaState();
}

class _BottomInputAreaState extends State<BottomInputArea> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 开启状态保持

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用super.build
    return TextFormField(hintText: "底部输入框");
  }
}

4. 优化父Widget的状态更新范围 #

检查父Widget的setState调用，确保只更新必要的状态变量，避免触发整个Widget树的重绘。比如，若父Widget里有和输入框无关的状态更新，可将这部分逻辑拆分到独立的子Widget中，用const构造函数或StatelessWidget来减少重建：

// 无关的静态UI用StatelessWidget+const构造
class TopStaticUI extends StatelessWidget {
  const TopStaticUI({super.key});

  @override
  Widget build(BuildContext context) {
    return TextFormField(hintText: "顶部输入框");
  }
}

// 父Widget只更新需要变化的部分
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        const TopStaticUI(), // 不会因父setState重建
        const Spacer(),
        TextFormField(hintText: "底部输入框"),
      ],
    ),
  );
}

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