Flutter Web中Shortcuts与Action组件无法监听页面级键盘快捷键问题

问题场景 #

在Flutter Web页面中实现了Ctrl+R、Ctrl+D键盘快捷键，用于快速聚焦不同的TextField组件。但遇到以下问题：

• 当焦点在TextField内时，快捷键正常触发
• 点击TextField外的页面区域后，全局焦点丢失，快捷键完全失效
• 尝试用FocusScope替代Focus组件，却导致焦点无法离开TextField，始终锁定在当前输入框

核心原因 #

原代码中的Focus组件在点击外部区域后会失去焦点，导致包裹的Shortcuts和Actions无法监听键盘事件。需要一个始终保持焦点的容器，同时允许子组件正常获取焦点、切换焦点。

解决方案 #

通过自定义主焦点节点+焦点容器配置，确保全局快捷键始终处于监听状态：

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class KeyboardShortcutTesting extends StatelessWidget {
  KeyboardShortcutTesting({Key? key}) : super(key: key);

  final FocusNode textfield1FocusNode = FocusNode();
  final FocusNode textfield2FocusNode = FocusNode();
  final FocusNode _mainFocusNode = FocusNode(); // 全局主焦点容器

  @override
  Widget build(BuildContext context) {
    return Shortcuts(
      shortcuts: {
        LogicalKeySet(LogicalKeyboardKey.controlLeft, LogicalKeyboardKey.keyR):
            Testfield1ShorcutIntent(),
        LogicalKeySet(LogicalKeyboardKey.controlLeft, LogicalKeyboardKey.keyD):
            Testfield2ShorcutIntent(),
      },
      child: Actions(
        actions: {
          Testfield1ShorcutIntent: CallbackAction<Testfield1ShorcutIntent>(
            onInvoke: (intent) {
              print('Ctrl + R pressed');
              textfield1FocusNode.requestFocus();
              return null;
            },
          ),
          Testfield2ShorcutIntent: CallbackAction<Testfield2ShorcutIntent>(
            onInvoke: (intent) {
              print('Ctrl + D pressed');
              textfield2FocusNode.requestFocus();
              return null;
            },
          ),
        },
        child: Focus(
          focusNode: _mainFocusNode,
          autofocus: true,
          canRequestFocus: false, // 关键：不抢夺子组件焦点，仅作为事件容器
          skipTraversal: true,
          child: Scaffold(
            appBar: AppBar(title: const Text('Keyboard shortcut testing')),
            body: GestureDetector(
              // 点击外部区域时，重置主焦点容器的焦点
              onTap: () => _mainFocusNode.requestFocus(),
              child: Center(
                child: Card(
                  color: Colors.amber[50],
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: SizedBox(
                      width: 300,
                      height: 200,
                      child: Column(
                        children: [
                          TextField(
                            focusNode: textfield1FocusNode,
                            decoration: const InputDecoration(
                              border: OutlineInputBorder(),
                            ),
                          ),
                          const SizedBox(height: 10),
                          TextField(
                            focusNode: textfield2FocusNode,
                            decoration: const InputDecoration(
                              border: OutlineInputBorder(),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class Testfield1ShorcutIntent extends Intent {}

class Testfield2ShorcutIntent extends Intent {}

关键修改点说明 #

1. 全局主焦点节点：新增_mainFocusNode作为整个页面的焦点容器，确保Shortcuts和Actions始终能捕获键盘事件
2. 焦点容器配置：设置canRequestFocus: false，让主焦点容器不会主动抢夺子组件的焦点，TextField可正常获取、切换焦点
3. 外部点击处理：用GestureDetector监听页面外部点击，点击时重置主焦点容器的焦点，避免全局焦点丢失
4. 修正快捷键对应逻辑：调整原代码中打印信息与快捷键不匹配的问题

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