Flutter：如何实现点击按钮后聚焦条件渲染的TextField？

你的代码无法让TextField获取焦点，核心原因有两个：

1. 修改_buttonPressed后没有调用setState()，UI不会更新，TextField根本没被渲染出来。
2. 就算触发了UI更新，同步请求焦点时TextField还未完成Widget树构建，焦点请求无法生效。

解决方案 #

1. 点击按钮时通过setState()更新状态，触发TextField渲染。
2. 借助WidgetsBinding.instance.addPostFrameCallback，在当前UI帧构建完成后再请求焦点，确保TextField已存在于Widget树中。
3. 记得在dispose()中销毁FocusNode，避免内存泄漏。

修改后的完整代码 #

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _buttonPressed = false;
  late FocusNode _focusNode;

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

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ElevatedButton(
            onPressed: () {
              setState(() {
                _buttonPressed = true;
              });
              // 等待UI渲染完成后请求焦点
              WidgetsBinding.instance.addPostFrameCallback((_) {
                FocusScope.of(context).requestFocus(_focusNode);
              });
            },
            child: const Text('Button'),
          ),
          _buttonPressed
              ? TextField(
                  focusNode: _focusNode,
                  decoration: const InputDecoration(hintText: "自动获取焦点"),
                )
              : Container(),
        ],
      ),
    );
  }
}

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