Flutter点击按钮跳转至第二个页面并自动聚焦TextField弹出键盘

实现步骤（Flutter场景） #

• 在第二个页面的State类中初始化FocusNode，并在页面渲染完成后请求焦点：

  class SecondPage extends StatefulWidget {
    const SecondPage({super.key});
  
    @override
    State<SecondPage> createState() => _SecondPageState();
  }
  
  class _SecondPageState extends State<SecondPage> {
    late FocusNode _textFieldFocusNode;
  
    @override
    void initState() {
      super.initState();
      _textFieldFocusNode = FocusNode();
      // 等待页面渲染完成后再请求焦点，确保生效
      WidgetsBinding.instance.addPostFrameCallback((_) {
        FocusScope.of(context).requestFocus(_textFieldFocusNode);
      });
    }
  
    @override
    void dispose() {
      // 销毁FocusNode，避免内存泄漏
      _textFieldFocusNode.dispose();
      super.dispose();
    }
  

• 将FocusNode绑定到目标TextField：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('第二个页面')),
      body: Center(
        child: TextField(
          focusNode: _textFieldFocusNode,
          decoration: const InputDecoration(hintText: '请输入内容'),
        ),
      ),
    );
  }
  

• 第一个页面的跳转逻辑保持常规即可：

  ElevatedButton(
    onPressed: () {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => const SecondPage()),
      );
    },
    child: const Text('跳转到第二个页面'),
  )
  

关键注意点 #

• 必须使用WidgetsBinding.instance.addPostFrameCallback：因为initState执行时页面尚未完成渲染，直接调用requestFocus会无效
• 务必在dispose中销毁FocusNode：防止内存泄漏
• 若需简化实现，也可以直接给TextField设置autofocus: true，但使用FocusNode的方式更灵活（比如后续需要手动控制焦点状态）

内容的提问来源于stack exchange，提问作者Mister MB Boss