Flutter ListView.builder点击外部后键盘无响应及跳转页FocusNode报错问题

问题1：点击外部区域后键盘按键无响应原因 #

你的问题本质是RawKeyboardListener的焦点被其他组件抢占，并非FocusNode被销毁。RawKeyboardListener仅在自身绑定的FocusNode持有焦点时，才能接收到键盘输入事件，你点击页面其他区域后，Flutter焦点管理会将焦点转移到被点击的可聚焦节点，因此RawKeyboardListener无法再收到事件。

解决方案 #

方案一：使用全局键盘监听（推荐）

直接注册全局键盘事件回调，不受焦点切换影响，适配全页面监听的场景：

@override
void initState() {
  super.initState();
  // 注册全局键盘监听
  ServicesBinding.instance.keyboard.addHandler(_handleKeyEvent);
}

@override
void dispose() {
  // 移除全局监听
  ServicesBinding.instance.keyboard.removeHandler(_handleKeyEvent);
  _focusNode.dispose();
  super.dispose();
}

// 调整事件处理方法的返回值，返回true表示消费当前事件，false允许事件继续冒泡
bool _handleKeyEvent(KeyEvent event) {
  if (event is KeyDownEvent && event.logicalKey == LogicalKeyboardKey.digit1) {
    nOfList += 1;
    setState(() {});
    return true;
  }
  if (event is KeyDownEvent && event.logicalKey == LogicalKeyboardKey.digit2) {
    if (nOfList > 1) nOfList--;
    setState(() {});
    return true;
  }
  return false;
}

方案二：手动抢占焦点

给页面外层加点击事件，每次点击页面后主动将焦点切回RawKeyboardListener绑定的节点：

@override
Widget build(BuildContext context) {
  return Scaffold(
    drawer: MenuDrawer(),
    appBar: AppBar(title: Text('OnTap-widget.Issue')),
    // 外层加GestureDetector捕获所有点击事件
    body: GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () => _focusNode.requestFocus(),
      child: RawKeyboardListener(
        autofocus: true,
        focusNode: _focusNode,
        onKey: _handleKeyEvent,
        // 原有子组件不变
      ),
    ),
  );
}

问题2：跳转页面时报FocusNode已销毁错误原因 #

你有两处代码不规范的问题共同导致了该错误：

1. 你将可变状态testOnTap、nOfList放在了StatefulWidget类中，Widget本身是不可变配置类，状态放在Widget中会导致页面重建、销毁时出现时序异常，跳转页面时旧实例的FocusNode已经被销毁，焦点管理器还在尝试访问该节点。
2. 销毁FocusNode前没有先移除其焦点，导致焦点变更通知在节点销毁后才触发，触发报错。

解决方案 #

1. 将所有可变状态移到State类中：

class OnTapWidgetIssue extends StatefulWidget {
  const OnTapWidgetIssue({Key? key}) : super(key: key);
  @override
  _OnTapWidgetIssueState createState() => _OnTapWidgetIssueState();
}

class _OnTapWidgetIssueState extends State<OnTapWidgetIssue> {
  final FocusNode _focusNode = FocusNode();
  // 可变状态移到State类内部
  String testOnTap = '';
  int nOfList = 1;
  // 其余原有逻辑不变
}

2. 销毁前先移除FocusNode的焦点：

@override
void dispose() {
  // 先移除焦点再销毁节点
  _focusNode.unfocus();
  _focusNode.dispose();
  super.dispose();
}

额外优化：Flutter 3.10及以上版本已经弃用RawKeyboardListener，推荐替换为KeyboardListener组件，API更稳定，可避免大部分焦点时序问题。

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