Flutter Web：如何通过回车键触发弹窗确认功能？

你的代码中RawKeyboardListener无法捕获按键事件，核心原因有两个：

1. 创建了FocusNode但未主动请求焦点——RawKeyboardListener只有在自身获得焦点时才会监听按键动作
2. 弹窗内的按钮会自动抢占焦点，导致RawKeyboardListener失去焦点权限

下面是两种可行的修复方案：

方案1：修复RawKeyboardListener的焦点问题 #

通过主动为FocusNode请求焦点，并确保焦点不被弹窗内组件抢占，修改后的代码如下：

showDialog(
  context: context,
  builder: (context) {
    final focusNode = FocusNode();
    // 弹窗渲染完成后主动请求焦点
    WidgetsBinding.instance.addPostFrameCallback((_) {
      focusNode.requestFocus();
    });
    return RawKeyboardListener(
      focusNode: focusNode,
      onKey: (RawKeyEvent event) {
        // 只处理回车键按下事件
        if (event is RawKeyDownEvent && event.logicalKey == LogicalKeyboardKey.enter) {
          Navigator.pop(context);
          cubit.deleteCategory(item.id);
        }
      },
      child: DialogSimple(
        title: "Delete Category?",
        message: "Do you really want to delete this category?. You cannot undo this action.",
        actions: [
          BtnTextAccent(
            text: "Cancel",
            textColor: Colors.white,
            onPressed: () => Navigator.pop(context),
          ),
          BtnTextAccent(
            text: "Delete",
            textColor: AppColors.dangerColor,
            onPressed: () {
              Navigator.pop(context);
              cubit.deleteCategory(item.id);
            },
          ),
        ],
      ),
    );
  },
);

如果要避免内存泄漏，建议将弹窗封装为独立的StatefulWidget，在dispose方法中销毁FocusNode：

class DeleteCategoryDialog extends StatefulWidget {
  final String categoryId;
  final VoidCallback onDelete;

  const DeleteCategoryDialog({
    super.key,
    required this.categoryId,
    required this.onDelete,
  });

  @override
  State<DeleteCategoryDialog> createState() => _DeleteCategoryDialogState();
}

class _DeleteCategoryDialogState extends State<DeleteCategoryDialog> {
  late FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
    _focusNode = FocusNode();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _focusNode.requestFocus();
    });
  }

  @override
  void dispose() {
    _focusNode.dispose(); // 销毁焦点节点，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return RawKeyboardListener(
      focusNode: _focusNode,
      onKey: (RawKeyEvent event) {
        if (event is RawKeyDownEvent && event.logicalKey == LogicalKeyboardKey.enter) {
          Navigator.pop(context);
          widget.onDelete();
        }
      },
      child: DialogSimple(
        title: "Delete Category?",
        message: "Do you really want to delete this category?. You cannot undo this action.",
        actions: [
          BtnTextAccent(
            text: "Cancel",
            textColor: Colors.white,
            onPressed: () => Navigator.pop(context),
          ),
          BtnTextAccent(
            text: "Delete",
            textColor: AppColors.dangerColor,
            onPressed: () {
              Navigator.pop(context);
              widget.onDelete();
            },
          ),
        ],
      ),
    );
  }
}

// 调用方式
showDialog(
  context: context,
  builder: (context) => DeleteCategoryDialog(
    categoryId: item.id,
    onDelete: () => cubit.deleteCategory(item.id),
  ),
);

方案2：使用Flutter官方推荐的Shortcuts+Actions组件 #

对于键盘快捷键场景，Flutter官方更推荐使用Shortcuts和Actions组合，这种方式更符合框架设计规范：

showDialog(
  context: context,
  builder: (context) {
    return Shortcuts(
      // 定义快捷键：回车键触发DeleteAction
      shortcuts: {
        LogicalKeySet(LogicalKeyboardKey.enter): const Intent("DeleteAction"),
      },
      child: Actions(
        // 绑定快捷键对应的动作
        actions: {
          "DeleteAction": CallbackAction(
            onInvoke: (_) {
              Navigator.pop(context);
              cubit.deleteCategory(item.id);
              return null;
            },
          ),
        },
        // 自动获取焦点，确保快捷键能被捕获
        child: Focus(
          autofocus: true,
          child: DialogSimple(
            title: "Delete Category?",
            message: "Do you really want to delete this category?. You cannot undo this action.",
            actions: [
              BtnTextAccent(
                text: "Cancel",
                textColor: Colors.white,
                onPressed: () => Navigator.pop(context),
              ),
              BtnTextAccent(
                text: "Delete",
                textColor: AppColors.dangerColor,
                onPressed: () {
                  Navigator.pop(context);
                  cubit.deleteCategory(item.id);
                },
              ),
            ],
          ),
        ),
      ),
    );
  },
);

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