如何更简洁管理FocusNode并判断用户聚焦的TextFormField？

方案1：用列表统一管理FocusNode，批量添加监听器 #

把多个FocusNode整合到列表中，通过循环完成初始化、监听器绑定和销毁操作，避免重复编写相似代码。同时可以给每个输入框关联唯一标识，快速判断当前聚焦的目标。

class _TestNodeState extends State<TestNode> {
  late final List<FocusNode> _focusNodes;
  // 给每个输入框设置标识，方便区分处理
  final List<String> _fieldTags = ['用户名', '密码', '验证码'];

  @override
  void initState() {
    super.initState();
    // 批量初始化FocusNode
    _focusNodes = List.generate(3, (_) => FocusNode());
    // 统一添加监听器
    for (int i = 0; i < _focusNodes.length; i++) {
      _focusNodes[i].addListener(() {
        if (_focusNodes[i].hasFocus) {
          print('当前聚焦：${_fieldTags[i]}');
          // 这里编写对应输入框的处理逻辑
        }
      });
    }
  }

  @override
  void dispose() {
    // 批量销毁FocusNode，防止内存泄漏
    for (final node in _focusNodes) {
      node.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: List.generate(3, (index) {
        return TextFormField(
          focusNode: _focusNodes[index],
          decoration: InputDecoration(hintText: _fieldTags[index]),
        );
      }),
    );
  }
}

方案2：通过FocusManager全局追踪焦点，省去手动监听器 #

利用Flutter内置的FocusManager.instance.primaryFocus获取当前全局焦点，结合输入框的GlobalKey来标识目标，无需给每个FocusNode单独绑定监听器。

class _TestNodeState extends State<TestNode> {
  // 用GlobalKey标记每个输入框
  final _fieldKey1 = GlobalKey();
  final _fieldKey2 = GlobalKey();
  final _fieldKey3 = GlobalKey();

  void _checkCurrentFocus() {
    final currentFocus = FocusManager.instance.primaryFocus;
    if (currentFocus?.context == _fieldKey1.currentContext) {
      print('当前聚焦输入框1');
    } else if (currentFocus?.context == _fieldKey2.currentContext) {
      print('当前聚焦输入框2');
    } else if (currentFocus?.context == _fieldKey3.currentContext) {
      print('当前聚焦输入框3');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextFormField(
          key: _fieldKey1,
          onTap: _checkCurrentFocus,
        ),
        TextFormField(
          key: _fieldKey2,
          onTap: _checkCurrentFocus,
        ),
        TextFormField(
          key: _fieldKey3,
          onTap: _checkCurrentFocus,
        ),
      ],
    );
  }
}

方案3：封装自定义组件，复用FocusNode逻辑 #

如果项目中有大量需要焦点监听的输入框，可以封装一个带焦点处理逻辑的自定义组件，避免重复代码，提升复用性。

// 自定义带焦点监听的输入框组件
class FocusAwareTextFormField extends StatefulWidget {
  final String tag;
  final void Function(String) onFocus;

  const FocusAwareTextFormField({
    super.key,
    required this.tag,
    required this.onFocus,
  });

  @override
  State<FocusAwareTextFormField> createState() => _FocusAwareTextFormFieldState();
}

class _FocusAwareTextFormFieldState extends State<FocusAwareTextFormField> {
  late final FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
    _focusNode = FocusNode();
    _focusNode.addListener(() {
      if (_focusNode.hasFocus) {
        widget.onFocus(widget.tag);
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return TextFormField(focusNode: _focusNode);
  }
}

// 使用自定义组件
class _TestNodeState extends State<TestNode> {
  void _handleFocus(String tag) {
    print('当前聚焦：$tag');
    // 对应输入框的处理逻辑
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        FocusAwareTextFormField(
          tag: '用户名',
          onFocus: _handleFocus,
        ),
        FocusAwareTextFormField(
          tag: '密码',
          onFocus: _handleFocus,
        ),
        FocusAwareTextFormField(
          tag: '验证码',
          onFocus: _handleFocus,
        ),
      ],
    );
  }
}

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