Flutter中如何避免TextFormField全局FocusNode引发的光标自动激活问题

核心思路 #

给全局TextFormField组件添加可选的FocusNode参数，让只有登录页面传入指定的FocusNode，其他页面不传时组件自动创建独立的FocusNode，避免共用同一个实例导致的全局自动获焦问题。

具体实现步骤 #

1. 修改全局TextFormField组件

添加自定义FocusNode的可选参数，并在组件内部处理焦点逻辑，同时注意内存泄漏问题：

class GlobalTextFormField extends StatefulWidget {
  // 新增可选参数：外部传入的FocusNode
  final FocusNode? customFocusNode;
  final bool readOnly;
  final bool isEnable;

  const GlobalTextFormField({
    super.key,
    this.customFocusNode,
    required this.readOnly,
    required this.isEnable,
  });

  @override
  State<GlobalTextFormField> createState() => _GlobalTextFormFieldState();
}

class _GlobalTextFormFieldState extends State<GlobalTextFormField> {
  late FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
    // 优先使用外部传入的FocusNode，否则创建本地独立实例
    _focusNode = widget.customFocusNode ?? FocusNode();
  }

  @override
  void dispose() {
    // 仅销毁组件自己创建的FocusNode，避免重复销毁外部传入的实例
    if (widget.customFocusNode == null) {
      _focusNode.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      focusNode: _focusNode,
      enabled: widget.isEnable,
      readOnly: widget.readOnly,
      // 其他原有配置
    );
  }
}

2. 登录页面使用组件时传入指定FocusNode

在登录页面的State中定义并管理这个FocusNode，需要时自动请求焦点：

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // 登录页面专属的FocusNode
  final FocusNode textFocusOnFirstField = FocusNode();

  @override
  void initState() {
    super.initState();
    // 页面渲染完成后自动请求焦点
    WidgetsBinding.instance.addPostFrameCallback((_) {
      FocusScope.of(context).requestFocus(textFocusOnFirstField);
    });
  }

  @override
  void dispose() {
    // 登录页面销毁时清理自己的FocusNode
    textFocusOnFirstField.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GlobalTextFormField(
        // 传入登录页面的FocusNode
        customFocusNode: textFocusOnFirstField,
        readOnly: false,
        isEnable: true,
      ),
    );
  }
}

3. 其他页面使用组件时不传入FocusNode

其他页面直接使用组件，不传customFocusNode参数，组件会自动创建独立的FocusNode，不会触发自动获焦：

GlobalTextFormField(
  readOnly: false,
  isEnable: true,
)

关键注意点 #

• 外部传入的FocusNode必须由传入的页面负责销毁（比如登录页面的dispose方法），否则会导致内存泄漏。
• 组件内部只销毁自己创建的FocusNode，避免重复销毁外部实例引发异常。

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