Flutter中拦截iOS侧滑返回与Android返回按钮的问题排查

问题场景 #

需要在PersonalDataScreen页面实现返回拦截逻辑：

• 未修改个人数据时，iOS侧滑返回、Android系统返回按钮直接生效
• 已修改个人数据时，停留在当前页面并弹出确认对话框
  目前自定义导航栏的返回按钮逻辑已正常工作，但使用PopScope的canPop属性绑定自定义方法时，该方法仅在页面初始化时执行一次，侧滑返回时完全不触发，导致拦截失效。

错误原因 #

PopScope的canPop是静态布尔属性，不是动态回调方法。直接赋值canPopMethod()只会在build阶段执行一次，把返回的布尔值传给canPop，后续的返回操作不会再调用canPopMethod()，自然无法动态判断是否允许返回。

正确做法是使用PopScope提供的onPopInvoked回调，这个方法会在每次返回操作触发时被调用，能实时处理拦截逻辑。

修正后的代码实现 #

@override
Widget build(BuildContext context) {
  return PopScope(
    // 关闭系统默认返回逻辑，强制走onPopInvoked处理
    canPop: false,
    onPopInvoked: (bool didPop) async {
      // didPop为true说明系统已经完成了pop操作，这里无需处理
      if (didPop) return;

      // 个人数据未加载完成时，直接返回上一页
      if (!isProfileLoadedSuccesfully) {
        if (context.mounted) Navigator.pop(context);
        return;
      }

      // 检查是否有数据变更
      if (hasChanges(profileModel)) {
        if (!context.mounted) return;
        // 弹出确认对话框
        await ShowDialog.showDialogOnScreen(
          context: context,
          title: 'Has changes, do you want to save?',
          onTapNo: () {
            Navigator.pop(context); // 关闭对话框
            Navigator.pop(context); // 返回上一页
          },
          onTapYes: () {
            Navigator.pop(context); // 关闭对话框
            changeProfile(); // 执行数据保存逻辑
            Navigator.pop(context); // 返回上一页
          },
        );
      } else {
        // 无数据变更，直接返回
        if (context.mounted) Navigator.pop(context);
      }
    },
    child: Scaffold(
      appBar: CustomAppBar2(
        title: 'Personal data',
        onTapBack: () {
          if (isProfileLoadedSuccesfully && hasChanges(profileModel)) {
            ShowDialog.showDialogOnScreen(
              context: context,
              title: 'Has changes, do you want to save?',
              onTapNo: () {
                Navigator.pop(context);
                Navigator.pop(context);
              },
              onTapYes: () {
                Navigator.pop(context);
                changeProfile();
                Navigator.pop(context);
              },
            );
          } else {
            Navigator.pop(context);
          }
        },
      ),
      body: BlocBuilder<ProfileBloc, ProfileState>(
        builder: (context, state) {
          isProfileLoadedSuccesfully = false;
          return switch (state) {
            ProfileInitial() => const Center(child: CircularProgressIndicator()),
            ProfileLoaded() => _buildBody(state, context),
          };
        },
      ),
    ),
  );
}

Widget _buildBody(ProfileLoaded state, BuildContext context) {
  isProfileLoadedSuccesfully = true;
  return someWidget();
}

bool hasChanges(ProfileModel? profileModel) {
  return firstNameController.text != profileModel?.firstName ||
      lastNameController.text != profileModel?.lastName ||
      phoneController.text != profileModel?.phone ||
      emailController.text != profileModel?.email ||
      innPassportController.text != profileModel?.innPassport;
}

关键细节说明 #

• canPop: false：禁用系统默认的返回行为，确保所有返回操作都进入onPopInvoked处理流程
• onPopInvoked回调：每次侧滑、系统返回键触发时都会调用，在这里实现动态的返回判断逻辑
• context.mounted检查：异步弹出对话框后，必须确认当前页面仍处于挂载状态，避免出现上下文失效的错误
• 对话框逻辑保持原有业务逻辑，确保用户确认后再执行保存或返回操作

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