Flutter中TextField组件异常：键盘弹出后立即消失页面卡顿

问题现象 #

开发的用户补充名称页面中，点击输入框后键盘弹出瞬间就消失，页面出现异常。相同代码逻辑在邮箱、密码输入页正常运行，怀疑近期模拟器异常可能是诱因之一。

代码问题分析 #

1. Firestore文档引用逻辑错误
   当前代码中userDoc = FirebaseFirestore.instance.collection('users').doc()会在State实例化时生成一个随机ID的新文档，既不符合“关联当前登录用户”的业务逻辑，还可能因不必要的Firestore实例创建触发页面状态重建，导致输入框失焦。

2. 布局冲突导致页面重建
   使用SizedBox固定高度为MediaQuery.of(context).size.height，再嵌套SingleChildScrollView。当键盘弹出时，屏幕高度会变化，SizedBox的高度会重新计算，触发页面整体重建，进而让输入框失去焦点，键盘自动收起。

解决方案 #

1. 修正Firestore文档引用 #

将文档引用改为关联当前登录用户的UID，并在initState中初始化，确保文档与用户一一对应：

class _AddNameState extends State<AddName> {
  final TextEditingController _firstNameController = TextEditingController();
  final TextEditingController _lastNameController = TextEditingController();
  final user = FirebaseAuth.instance.currentUser;
  late final DocumentReference userDoc;

  @override
  void initState() {
    super.initState();
    // 关联当前登录用户的文档
    if (user != null) {
      userDoc = FirebaseFirestore.instance.collection('users').doc(user!.uid);
    }
  }

  // 剩余代码保持不变
}

2. 修复布局问题 #

移除SizedBox的固定高度设置，让SingleChildScrollView自适应内容高度，避免键盘弹出时的布局重建：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      child: Column(
        children: [
          const SizedBox(height: 100),
          const Text(
            'Please enter your name',
            style: TextStyle(
              color: Colors.white,
              fontSize: 30,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 20),
          const Text('You must enter your name to use the app'),
          const SizedBox(height: 80),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: TextField(
              controller: _firstNameController,
              style: const TextStyle(color: Colors.white),
              decoration: const InputDecoration(
                hintText: 'Enter your first name',
                hintStyle: TextStyle(color: Colors.white),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: TextField(
              controller: _lastNameController,
              style: const TextStyle(color: Colors.white),
              decoration: const InputDecoration(
                hintText: 'Enter your last name',
                hintStyle: TextStyle(color: Colors.white),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          const SizedBox(height: 100),
          ElevatedButton(
            onPressed: () async {
              if (user != null) {
                await userDoc.set({
                  'displayName': '${_firstNameController.text} ${_lastNameController.text}',
                });
                // Navigator.of(context).pop();
              }
            },
            child: const Text('Submit'),
          ),
        ],
      ),
    ),
  );
}

3. 排除模拟器异常 #

• 重启模拟器并清除缓存
• 切换到真机测试，验证问题是否仅出现在模拟器中

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