使用带有嵌套导航器的 Escape 键关闭对话框答案

【问题标题】：Dismissing dialog with Escape key with nested navigator使用带有嵌套导航器的 Escape 键关闭对话框
【发布时间】：2021-08-11 20:14:05
【问题描述】：

我正在编写一个针对 macOS 的 Flutter 应用，并且希望能够显示一个允许在该对话框中导航的模态对话框（有点像一系列引导屏幕）。

为了便于在对话框中导航，我需要将小部件包装在某种导航器中。请参阅以下（简化）代码：

showDialog(
  context: context,
  builder: (context) => Dialog(
    child: SizedBox(
      width: 400,
      height: 400,
      child: Navigator(
        onGenerateRoute: (_) => MaterialPageRoute(
          builder: (_) => const Center(child: Text('hi there'))
        ),
      ),
    ),
  ),
);

现在这一切正常 - 除了解雇。我可以通过点击障碍区域来关闭对话框（这很好），但是，按键盘上的 ESC 不会关闭对话框。

如果我只是直接嵌入孩子（没有导航器），按 ESC 会完美地关闭对话框。但由于某种原因，Navigator 似乎正在吞下 ESC 键。我也尝试使用MaterialApp 作为导航器，它也吃掉了 ESC 键。

关于如何让导航器让我使用 ESC 键关闭对话框的任何理论？谢谢

【问题讨论】：

标签： flutter flutter-macos-2.0.0-stable

【解决方案1】：

您可以使用RawKeyboardListener 来监听按键，并在触发 ESC 事件时弹出。

无效的旧响应：尝试使用WillPopScope 将小部件包装在页面路由（在本例中为Center）内。您应该能够在内部Navigator 收到之前在onWillPop 回调上收到ESC 事件，然后您可以在外部Navigator 上调用pop 以关闭对话框。

【讨论】：

这是一个好主意，但遗憾的是 onWillPop() 没有被调用（当您按 ESC 或通过单击屏障关闭对话框时）
另一个想法是使用 RawKeyboardListener 来监听按键，并在 ESC 事件触发时弹出。