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

Question

我正在编写一个针对 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 键关闭对话框的任何理论？谢谢

Answer 1

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

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

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

Dismissing dialog with Escape key with nested navigator

flutter

flutter-macos-2.0.0-stable