在 Flutter Web 中禁用转义键导航答案

【问题标题】：Disable escape key navigation in Flutter Web在 Flutter Web 中禁用转义键导航
【发布时间】：2020-12-25 01:02:26
【问题描述】：

在 Flutter web 上键入转义键时，Flutter 执行Navigator.of(context).pop()。如何禁用此功能？

以下是我测试的场景，它们都产生了一致的功能：

Mac 上的 Chrome、Windows 上的 Edge 以及 DartPad 1.20.0 中
MaterialApp、CupertinoApp 和 WidgetsApp
调试模式和发布模式

我可以使用WillPopScope 禁用它，但这也禁用了在浏览器中按下后退按钮。我仍然希望允许用户使用浏览器进行导航，所以这不是一个可行的选择。

附带问题：有人知道为什么这是默认功能吗？这不是网站上的预期行为（不包括弹出菜单）。

【问题讨论】：

标签： flutter flutter-web

【解决方案1】：

Flutter web（以及桌面）使用 Esc 快捷方式来关闭模式对话框或弹出菜单。此绑定在WidgetsApp.defaultShortcuts 中的应用程序级别定义，不幸的是，它也会影响 Navigator。当然对于页面之间的导航，键盘快捷键应该有所不同，但目前 Flutter web 状态为 beta，并且一些功能仍在开发中。

作为一种解决方法，我们可以从MaterialApp 中删除此快捷方式：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    final shortcuts = Map.of(WidgetsApp.defaultShortcuts)
      ..remove(LogicalKeySet(LogicalKeyboardKey.escape));
    return MaterialApp(
      shortcuts: shortcuts,
      home: HomePage(),
    );
  }
}

并且必须根据需要在本地恢复一个：

  Future<void> openDialog(BuildContext context) async {
    final shortcuts = Shortcuts.of(context).shortcuts;
    final key = LogicalKeySet(LogicalKeyboardKey.escape);
    shortcuts[key] = WidgetsApp.defaultShortcuts[key];
    await showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("Alert Dialog"),
          content: Text("Dialog Content"),
        );
      },
    );
    shortcuts.remove(key);
  }

【讨论】：