Flutter：使用PopScope替代WillPopScope重写返回按钮行为

之前用WillPopScope实现返回时弹出确认对话框的方式已被废弃，现在可以用PopScope组件替代，具体实现方案如下：

PopScope核心属性说明 #

官方文档对onPopInvoked的说明翻译如下：

该方法被调用时，页面已经完成弹出操作。请使用[canPop]提前禁用弹出。

具体实现代码 #

AppScaffold(
  body: PopScope(
    // 禁用默认返回行为，交由自定义逻辑处理
    canPop: false,
    onPopInvoked: (bool didPop) async {
      // 若已经完成弹出，直接返回（这里因canPop为false，不会触发此分支）
      if (didPop) return;

      // 弹出确认对话框，获取用户选择
      final shouldPop = await showDialog<bool>(
        context: context,
        builder: (context) => AlertDialog(
          title: const Text('确认离开'),
          content: const Text('确定要退出当前页面吗？'),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(false),
              child: const Text('取消'),
            ),
            TextButton(
              onPressed: () => Navigator.of(context).pop(true),
              child: const Text('确定'),
            ),
          ],
        ),
      );

      // 用户确认离开时，手动执行页面弹出
      if (shouldPop == true && context.mounted) {
        Navigator.of(context).pop();
      }
    },
    child: const Contents(),
  ),
);

关键逻辑解释 #

• canPop: false：直接阻止系统默认的返回操作，确保必须经过确认流程才能退出页面
• onPopInvoked：用户点击返回按钮时触发该方法，didPop参数标记页面是否已完成弹出（此处因canPop为false，didPop始终为false）
• 确认对话框：通过showDialog获取用户的选择结果，若用户确认离开，则手动调用Navigator.pop()完成页面弹出
• context.mounted：避免在对话框关闭后上下文失效的问题，保证操作的安全性

内容的提问来源于stack exchange，提问作者Yahya Uddin