Flutter应用键盘自动弹出与恢复异常问题咨询

问题1：初始页面输入框无法自动唤起键盘 #

你的代码里存在几个关键问题导致自动聚焦失效：

• focusNode 和 controller 被定义为static，状态被类共享而非当前页面实例持有，焦点请求无法关联到当前输入框。
• TextFormField未绑定focusNode，initState里的focusNode.requestFocus()相当于对空节点操作，完全不起作用。
• 虽设置了autofocus: true，但应用启动的初始页面中，系统焦点可能被其他元素抢占，单独依赖autofocus稳定性不足。

问题2：应用从后台返回后键盘自动收起 #

应用进入后台时系统会重置焦点状态，回到前台后即使输入框表面保持焦点，实际系统已丢失焦点上下文，导致键盘自动收起。加上static的focusNode状态混乱，进一步加剧了这个问题。

修复后的完整代码 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:mask_text_input_formatter/mask_text_input_formatter.dart';

class Auth extends StatefulWidget {
  const Auth({super.key});
  @override
  AuthState createState() => AuthState();
}

class AuthState extends State<Auth> with WidgetsBindingObserver {
  // 去掉static，改为实例变量
  late FocusNode focusNode;
  late TextEditingController controller;

  @override
  void initState() {
    super.initState();
    focusNode = FocusNode();
    controller = TextEditingController();
    // 添加生命周期监听
    WidgetsBinding.instance.addObserver(this);
    
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // 确保输入框渲染完成后请求焦点
      FocusScope.of(context).requestFocus(focusNode);
    });
  }

  // 监听应用生命周期变化
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // 应用从后台回到前台时，重新请求焦点唤起键盘
    if (state == AppLifecycleState.resumed) {
      if (focusNode.hasFocus) {
        FocusScope.of(context).requestFocus(focusNode);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        systemOverlayStyle: const SystemUiOverlayStyle(
          statusBarColor: Colors.transparent,
          statusBarIconBrightness: Brightness.dark,
          statusBarBrightness: Brightness.light,
        ),
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      body: Padding(
        padding: const EdgeInsets.all(50.0),
        child: Center(
          child: Column(
            children: <Widget>[
              const SizedBox(height: 100.0),
              const Text(
                'Добро пожаловать',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 8.0),
              Container(
                constraints: const BoxConstraints(maxWidth: 200),
                child: const Text(
                  'Для входа укажите свой номер телефона',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 16.0, color: Colors.grey),
                ),
              ),
              const SizedBox(height: 24.0),
              TextFormField(
                inputFormatters: [
                  MaskTextInputFormatter(mask: '+# (###) ###-##-##')
                ],
                // 绑定focusNode和controller到输入框
                focusNode: focusNode,
                controller: controller,
                keyboardType: TextInputType.number,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Телефон',
                ),
              ),
              const SizedBox(height: 24.0),
              ElevatedButton(
                onPressed: () {
                  focusNode.unfocus();
                  // 这里可替换为实际业务逻辑
                },
                child: Text('Продолжить', style: TextStyle(fontSize: 16.0)),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 移除生命周期监听
    WidgetsBinding.instance.removeObserver(this);
    focusNode.dispose();
    controller.dispose();
    super.dispose();
  }
}

关键修改点说明 #

1. 移除static修饰符：让focusNode和controller成为页面实例的专属变量，避免跨实例状态混乱。
2. 绑定输入框与焦点节点：将focusNode关联到TextFormField，确保焦点请求能作用到目标输入框。
3. 添加生命周期监听：通过WidgetsBindingObserver监听应用从后台恢复的事件，重新请求焦点，解决键盘自动收起的问题。
4. 优化焦点请求时机：使用FocusScope.of(context).requestFocus()替代直接调用focusNode方法，更符合Flutter焦点管理逻辑。

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