Flutter TextField无法正常获取焦点问题求助

核心问题分析 #

你遇到的焦点异常，主要是手动在onTap中调用requestFocus()干扰了TextField的原生焦点处理逻辑，同时FloatingLabelBehavior.never的设置和labelText的搭配也不符合你期望的“获焦后标签消失”的需求。

具体修复步骤 #

1. 移除手动请求焦点的代码
   删除TextField的onTap: () => myFocusNode.requestFocus()，TextField本身在被点击时会自动触发焦点请求，手动调用会导致焦点状态混乱。

2. 调整输入提示的实现方式
   如果你希望点击TextField后提示文本消失，将labelText替换为hintText，并移除floatingLabelBehavior配置（hintText的显示逻辑是：输入框为空且未获焦时显示，获焦后自动消失，更匹配你的需求）。

3. 正确管理FocusNode生命周期
   确保在State类中正确初始化和销毁FocusNode，避免内存泄漏和状态异常：

   late FocusNode myFocusNode;
   late TextEditingController textController;
   
   @override
   void initState() {
     super.initState();
     myFocusNode = FocusNode();
     textController = TextEditingController();
   }
   
   @override
   void dispose() {
     myFocusNode.dispose();
     textController.dispose();
     super.dispose();
   }
   

修改后的完整代码 #

Widget build(BuildContext context) {
  return Container(
    padding: const EdgeInsets.all(5),
    child: Row(
      children: [
        Expanded(
          child: Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(100),
            ),
            child: Container(
              margin: const EdgeInsets.only(left: 10, bottom: 10, top: 10),
              child: TextField(
                decoration: const InputDecoration(
                  hintText: '  Enter task',
                  border: InputBorder.none,
                ),
                controller: textController,
                focusNode: myFocusNode,
                onSubmitted: (_) {
                  submit();
                  myFocusNode.requestFocus();
                  textController.clear();
                },
              ),
            ),
          ),
        ),
        CircleAvatar(
          child: TextButton(
            onPressed: submit,
            child: const FittedBox(
              child: Text(
                'Add',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

额外说明 #

如果坚持使用labelText并希望获焦后调整显示，可将FloatingLabelBehavior改为FloatingLabelBehavior.auto，此时标签会浮动到输入框上方而非直接消失。但根据你的描述，hintText更贴合“点击后提示消失”的需求。

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