Flutter中TextFormField的FocusNode失效问题求助

问题核心在于：点击按钮执行setState后，Flutter的组件重构是异步过程，此时立刻调用FocusScope.of(context).requestFocus(focusNode)，TextFormField还未完成渲染挂载，focusNode还未与输入框绑定，导致焦点请求失效。

修复方法1：使用WidgetsBinding.instance.addPostFrameCallback #

等待组件完成当前帧的构建后再请求焦点，确保输入框已经存在于界面中：

class MyApp extends StatefulWidget {
  MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool change = false;
  late FocusNode focusNode;

  @override
  void initState() {
    super.initState();
    focusNode = FocusNode();
  }

  @override
  void dispose() {
    focusNode.dispose(); // 释放FocusNode避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          actions: [
            IconButton(
              onPressed: () {
                setState(() {
                  change = true;
                });
                // 当前帧构建完成后执行焦点请求
                WidgetsBinding.instance.addPostFrameCallback((_) {
                  FocusScope.of(context).requestFocus(focusNode);
                });
              },
              icon: const Icon(Icons.add),
            ),
            const SizedBox(width: 141,)
          ],
        ),
        body: Center(
          child: change == false
              ? const Text("data")
              : TextFormField(
                  focusNode: focusNode,
                  decoration: const InputDecoration(border: OutlineInputBorder()),
                ),
        ),
      ),
    );
  }
}

修复方法2：使用Future.delayed(Duration.zero) #

这是另一种延迟执行方式，会在当前事件循环结束后执行，效果与addPostFrameCallback一致：

// 将按钮onPressed中的焦点请求替换为：
setState(() {
  change = true;
});
Future.delayed(Duration.zero, () {
  FocusScope.of(context).requestFocus(focusNode);
});

额外优化点 #

• 代码中未使用的focusNode2可直接删除，减少冗余代码。
• 必须在dispose方法中释放FocusNode，防止内存泄漏。

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