如何将WillPopScope的onWillPop逻辑迁移至PopScope组件？

要将原基于WillPopScope的返回确认逻辑迁移到PopScope时，直接设置canPop: false并手动调用Navigator.pop()会出现重复弹窗问题——因为Flutter会在触发onPopInvoked前先执行一次未完成的pop操作。

原WillPopScope实现 #

class Page extends StatelessWidget {
  const Page ({super.key});

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => showConfirmExitDialog(context),
      child: Scaffold(...),
    );
  }
}

存在重复弹窗问题的PopScope实现 #

PopScope(
  canPop: false,
  onPopInvoked: (value) async {
    final result = await showConfirmExitDialog(context);
    if (!context.mounted) return;
    if (result) Navigator.of(context).pop();
  },
  child: Scaffold(...),
)

正确的PopScope实现方案 #

核心是不设置canPop: false，而是通过onPopInvoked的didPop参数判断pop状态，按需处理确认逻辑：

PopScope(
  onPopInvoked: (didPop) async {
    // 仅处理系统触发但未执行的pop操作
    if (didPop) return;

    final result = await showConfirmExitDialog(context);
    if (!context.mounted) return;

    // 用户确认返回时手动执行pop
    if (result) {
      Navigator.of(context).pop();
    }
  },
  child: Scaffold(...),
)

原理说明 #

• 当不设置canPop时，默认值为true，用户触发返回时，系统会先调用onPopInvoked并传入didPop: false，表示默认pop尚未执行，此时我们可以拦截并处理确认逻辑。
• 如果用户确认返回，手动调用Navigator.pop()完成页面退出；如果用户取消，无需额外操作，默认pop会被自动拦截。
• 若设置canPop: false，系统会先尝试执行pop（失败），再触发onPopInvoked，这就导致了重复弹窗的问题。

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