Flutter中如何实现TextFormField间的焦点自动切换？

嘿，这个需求用FocusNode完全能搞定！我给你写个完整的可运行示例，再拆解一下关键步骤，你一看就明白怎么用了～

完整示例代码 #

import 'package:flutter/material.dart';

class AutoFocusForm extends StatefulWidget {
  const AutoFocusForm({super.key});

  @override
  State<AutoFocusForm> createState() => _AutoFocusFormState();
}

class _AutoFocusFormState extends State<AutoFocusForm> {
  // 为两个输入框分别创建FocusNode实例
  late final FocusNode _firstInputFocus;
  late final FocusNode _secondInputFocus;

  @override
  void initState() {
    super.initState();
    // 初始化FocusNode
    _firstInputFocus = FocusNode();
    _secondInputFocus = FocusNode();
  }

  @override
  void dispose() {
    // 务必在组件销毁时释放FocusNode，避免内存泄漏
    _firstInputFocus.dispose();
    _secondInputFocus.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('自动聚焦演示')),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
        child: Column(
          children: [
            TextFormField(
              focusNode: _firstInputFocus,
              decoration: const InputDecoration(
                labelText: '第一个输入框',
                border: OutlineInputBorder(),
              ),
              // 用户点击键盘"完成"按钮时触发此回调
              onFieldSubmitted: (inputValue) {
                // 请求将焦点切换到第二个输入框
                FocusScope.of(context).requestFocus(_secondInputFocus);
              },
              // 可选：让第一个输入框初始就自动获取焦点
              autofocus: true,
            ),
            const SizedBox(height: 16),
            TextFormField(
              focusNode: _secondInputFocus,
              decoration: const InputDecoration(
                labelText: '第二个输入框',
                border: OutlineInputBorder(),
              ),
              // 最后一个输入框点击完成时关闭键盘
              onFieldSubmitted: (inputValue) {
                FocusScope.of(context).unfocus();
              },
            ),
          ],
        ),
      ),
    );
  }
}

核心逻辑拆解 #

• 创建并管理FocusNode：每个需要控制焦点的输入框都要有独立的FocusNode，记得在initState初始化，dispose时释放——这一步很重要，不然会造成内存泄漏。
• 绑定FocusNode到输入框：把创建好的FocusNode赋值给对应TextFormField的focusNode参数，这样就能通过FocusNode控制这个输入框的焦点状态了。
• 触发焦点切换：在第一个输入框的onFieldSubmitted回调里，调用FocusScope.of(context).requestFocus(_secondInputFocus)，这样用户点键盘的完成键时，焦点就会自动跳到第二个输入框，而不是直接关闭键盘。
• 收尾处理：如果第二个输入框是表单的最后一项，可以在它的onFieldSubmitted里调用FocusScope.of(context).unfocus()，让用户点完成后直接收起键盘。

要是你还有其他关于焦点控制的疑问，随时问哦～

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