Flutter：点击编辑按钮唤起底部嵌套TextFormField的实现问题

1. 修正基础语法错误 #

先修复AddNewToDo中的明显语法问题：

• 移除重复的@override
• 将弹窗函数移到setState外部，避免嵌套错误

修正后的_AddNewToDoState核心代码：

class _AddNewToDoState extends State<AddNewToDo> {
  final TextEditingController taskController = TextEditingController();

  @override
  void initState() {
    super.initState();
    // 初始化时加载待编辑任务内容
    if (widget.initialTask != null) {
      taskController.text = widget.initialTask!;
    }
  }

  // 弹窗函数独立提取
  void showAlertDialog(BuildContext context) {
    Widget okButton = TextButton(
      child: const Text("OK"),
      onPressed: () => Navigator.pop(context),
    );

    AlertDialog alert = AlertDialog(
      title: const Text("Warning"),
      content: const Text("Please add a todo item."),
      actions: [okButton],
    );

    showDialog(
      context: context,
      builder: (BuildContext context) => alert,
    );
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Row(
      children: [
        Expanded(
          child: Container(
            margin: const EdgeInsets.only(left: 25),
            decoration: const BoxDecoration(
              boxShadow: [
                BoxShadow(
                  blurRadius: 35,
                  offset: Offset(0, 5),
                  color: Colors.black38,
                ),
              ],
            ),
            child: SizedBox(
              width: size.width / 1.7,
              child: TextFormField(
                focusNode: widget.taskFocusNode,
                controller: taskController,
                decoration: InputDecoration(
                  hintText: 'Add a new todo item',
                  filled: true,
                  fillColor: Colors.white,
                  contentPadding:
                      const EdgeInsets.symmetric(vertical: 17, horizontal: 20),
                  border: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
              ),
            ),
          ),
        ),
        const SizedBox(width: 20),
        FloatingActionButton(
          onPressed: () {
            if (taskController.text.isNotEmpty) {
              widget.addTodo(taskController.text);
              FocusScope.of(context).unfocus();
              taskController.clear();
            } else {
              showAlertDialog(context);
            }
          },
          shape: const BeveledRectangleBorder(),
          backgroundColor: const Color(0xFF5F56E8),
          child: const Icon(Icons.add, size: 40),
        ),
      ],
    );
  }
}

2. 正确初始化与传递FocusNode #

在父组件中统一管理FocusNode，确保编辑按钮和AddNewToDo使用同一个实例：

class _ParentScreenState extends State<ParentScreen> {
  final FocusNode taskFocusNode = FocusNode();
  String? currentEditingTask; // 存储当前要编辑的任务内容

  @override
  void dispose() {
    taskFocusNode.dispose(); // 销毁FocusNode，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ... 其他页面组件
      // 编辑按钮
      CustomButton(
        press: () {
          // 假设这里获取到要编辑的任务内容
          currentEditingTask = "需要编辑的待办内容";
          // 等待UI渲染完成后请求焦点，避免组件未加载导致失效
          WidgetsBinding.instance.addPostFrameCallback((_) {
            taskFocusNode.requestFocus();
          });
        },
        color: const Color(0xFF5F56E8),
        customIcon: const Icon(Icons.edit),
        customMargin: const EdgeInsets.only(right: 10),
      ),
      // 底部的AddNewToDo组件
      AddNewToDo(
        addTodo: (String task) {
          // 处理添加/编辑完成后的逻辑
        },
        initialTask: currentEditingTask,
        taskFocusNode: taskFocusNode,
      ),
    );
  }
}

3. 核心优化说明 #

• FocusNode生命周期：必须在父组件创建并销毁FocusNode，确保实例唯一且无内存泄漏。
• PostFrameCallback：直接调用requestFocus可能因组件未完成渲染失效，通过此回调确保UI加载完成后执行焦点请求。
• 编辑内容同步：在AddNewToDo的initState中同步初始编辑内容，确保唤起焦点时待办内容正确显示。
• 移除冗余setState：编辑按钮的setState完全多余，焦点请求无需触发组件重建。

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