Flutter表单焦点异常问询：未自定义FocusNode却触发FocusNode已释放后复用错误，导致输入框焦点无法正常切换

我之前遇到过几乎一模一样的问题，尤其是在使用自动管理FocusNode的TextField构建表单时，偶尔会出现焦点混乱、报错FocusNode was used after being disposed的情况。结合你提供的报错信息和场景，我来分享下排查思路和解决方案：

问题根源分析 #

虽然你没有手动创建FocusNode，但Flutter的TextField会自动为每个输入框生成一个内部的FocusNode。当你的表单页面（CardForm）在路由跳转、布局重建过程中，这些自动生成的FocusNode可能被错误地提前disposed，但框架后续还尝试通知它的状态变化，就会触发这个报错，进而导致焦点管理失效——比如你看到的两个输入框同时显示聚焦状态、光标无法正常切换的问题。

可行解决方案 #

1. 手动管理FocusNode（最可靠的解决方式） #

放弃自动生成的FocusNode，手动为每个TextField创建并管理，确保生命周期和页面State绑定：

class CardForm extends StatefulWidget {
  @override
  _CardFormState createState() => _CardFormState();
}

class _CardFormState extends State<CardForm> {
  late FocusNode _cardNumberFocus;
  late FocusNode _expiryDateFocus;
  late FocusNode _cvvFocus;

  @override
  void initState() {
    super.initState();
    _cardNumberFocus = FocusNode();
    _expiryDateFocus = FocusNode();
    _cvvFocus = FocusNode();
  }

  @override
  void dispose() {
    // 务必在页面销毁时释放所有FocusNode
    _cardNumberFocus.dispose();
    _expiryDateFocus.dispose();
    _cvvFocus.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          focusNode: _cardNumberFocus,
          decoration: InputDecoration(labelText: '卡号'),
          onEditingComplete: () {
            // 手动切换到下一个焦点
            FocusScope.of(context).requestFocus(_expiryDateFocus);
          },
        ),
        TextField(
          focusNode: _expiryDateFocus,
          decoration: InputDecoration(labelText: '有效期'),
          onEditingComplete: () {
            FocusScope.of(context).requestFocus(_cvvFocus);
          },
        ),
        TextField(
          focusNode: _cvvFocus,
          decoration: InputDecoration(labelText: 'CVV'),
        ),
      ],
    );
  }
}

这种方式完全掌控了FocusNode的生命周期，从根本上避免了“已释放的FocusNode被重复使用”的问题，同时还能通过FocusScope精准控制焦点切换逻辑。

2. 跳转页面前置处理焦点 #

在打开表单页面之前，先清空当前页面的焦点，避免新旧页面的焦点状态冲突：

Future<void> _addPaymentMethod(BuildContext context) async {
  // 清空当前页面的焦点
  FocusManager.instance.primaryFocus?.unfocus();
  await Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => Scaffold(
        body: CardForm(),
      ),
    ),
  );
}

这个操作能减少路由跳转时的焦点状态残留，降低异常触发的概率。

3. 确保表单在可滚动容器内 #

如果你的CardForm表单没有包裹在SingleChildScrollView（或其他可滚动组件）中，当键盘弹出时可能会触发页面布局重建，进而干扰FocusNode的状态管理。把表单放在可滚动容器里：

class CardForm extends StatefulWidget {
  @override
  _CardFormState createState() => _CardFormState();
}

class _CardFormState extends State<CardForm> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.all(16),
      child: Column(
        // 你的表单输入框
      ),
    );
  }
}

4. 升级Flutter到稳定版 #

这个问题在Flutter的一些旧版本（比如2.x的部分分支）中属于已知的框架小bug，自动管理的FocusNode在路由场景下的生命周期处理不够严谨。升级到最新的稳定版Flutter，大概率能解决这类非必现的焦点异常问题。

额外验证建议 #

如果你采用手动管理FocusNode的方案，可以在FocusNode的addListener方法中监听焦点变化，打印日志排查状态，比如：

@override
void initState() {
  super.initState();
  _cardNumberFocus = FocusNode()..addListener(() {
    print('卡号输入框焦点状态：${_cardNumberFocus.hasFocus}');
  });
}

这样能更直观地看到焦点切换是否符合预期，快速定位问题。

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