Flutter 弃用 WillPopScope 使用 PopScope 替代方法

视频

https://www.bilibili.com/video/BV1aJ4m1n7FZ

前言

原文 https://ducafecat.com/blog/migrating-from-willpopscope-to-popscope-in-flutter

了解如何在 Flutter 3.16 中将弃用的 WillPopScope 替换为 PopScope，并学习如何升级您的 Flutter 应用程序。详细指南和最佳实践，帮助您顺利迁移和更新您的导航逻辑。

Flutter, WillPopScope, PopScope, 替换指南, 迁移, 最佳实践, Flutter 3.19 迁移

参考

• Flutter 官方文档 - Navigator
• Flutter 官方文档 - PopScope
• Flutter 官方文档 - WillPopScope
• Flutter 社区 - FlutterDev

PopScope 组件定义

/flutter/lib/src/widgets/pop_scope.dart

class PopScope extends StatefulWidget {
   
   
  /// Creates a widget that registers a callback to veto attempts by the user to
  /// dismiss the enclosing [ModalRoute].
  const PopScope({
   
   
    super.key,
    required this.child,
    this.canPop = true,
    this.onPopInvoked,
  });

通过 PopScope 组件累定义得知：

• 当 canPop 为 true，则系统返回手势将导致封闭的 Navigator 照常接收弹出。会调用 onPopInvoked，此时didPop为true。
• 当 canPop 为 false，则系统返回手势不会将路由从封闭的 Navigator 中弹出，但仍然会调用 onPopInvoked 方法，此时 didPop 为 false，此时进行逻辑判断或者插入其他需要执行的代码，如果需要返回则再执行 Navigator.of(context).pop(); 。
• 注意此时 onPopInvoked 又会被再次调用，但此时 didPop 为 true。
• 在onPopInvoked中，需要判断一下 didPop，如果为 true, 则 return。

步骤

lib/pages/system/main/view.dart

第一步：返回提示函数

定义请求时间，方便计算间隔

  // 退出请求时间
  DateTime? currentBackPressTime;

间隔大于4 秒无效

  // 返回键退出
  bool closeOnConfirm() {
   
   
    DateTime now = DateTime.now();
    // 物理键，两次间隔大于4秒, 退出请求无效
    if (currentBackPressTime == null ||
        now.difference(currentBackPressTime!) > const Duration(seconds: 4)) {
   
   
      currentBackPressTime = now;
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          behavior: SnackBarBehavior.floating,
          content: Center(child: Text('再次按下以关闭应用程序')),
          duration: Duration(seconds: 4),
        ),
      );
      return false;
    }

    // 退出请求有效
    currentBackPressTime = null;
    return true;
  }

第二步：Pop 时退出确认

初始 canPop = fase 启用退出确认

  // 主视图
  Widget _buildView(MainController controller) {
   
   
    /// PopScope
    /// ios 是顶部导航返回按钮
    /// android 是系统返回按钮
    return PopScope(
      canPop: false, // 允许返回
      // 防止连续点击两次退出
      onPopInvoked: (bool didPop) async {
   
   
        if (didPop) {
   
   
          return;
        }
        if (closeOnConfirm()) {
   
   
          // 系统级别导航栈 退出程序
          SystemNavigator.pop();
        }
      },
      child: ......

pop 退出时机，ios 是顶部系统导航栏， android 是底部系统导航栏。

小结

在 Flutter 3.16 中，WillPopScope 已被弃用，推荐使用 PopScope 来替代。通过 PopScope 组件的定义，我们了解到其工作原理和用法。当 canPop 为 true 时，系统返回手势将正常弹出封闭的 Navigator，并调用 onPopInvoked 方法。如果 canPop 为 false，则返回手势不会从导航器中弹出路由，但仍会触发 onPopInvoked 方法，此时我们可以根据需要进行逻辑判断或插入其他代码。需要注意的是，onPopInvoked 方法会再次被调用，但此时 didPop 为 true。在 onPopInvoked 中，我们应该根据 didPop 的值进行判断并进行相应的处理。本文提供了详细的指导和最佳实践，帮助您顺利迁移和更新您的 Flutter 应用程序的导航逻辑。

感谢阅读本文

如果有什么建议，请在评论中让我知道。我很乐意改进。

flutter 学习路径

• Flutter 优秀插件推荐 https://flutter.ducafecat.com
• Flutter 基础篇1 - Dart 语言学习 https://ducafecat.com/course/dart-learn
• Flutter 基础篇2 - 快速上手 https://ducafecat.com/course/flutter-quickstart-learn
• Flutter 实战1 - Getx Woo 电商APP https://ducafecat.com/course/flutter-woo
• Flutter 实战2 - 上架指南 Apple Store、Google Play https://ducafecat.com/course/flutter-upload-apple-google
• Flutter 基础篇3 - 仿微信朋友圈 https://ducafecat.com/course/flutter-wechat
• Flutter 实战3 - 腾讯 tim 即时通讯开发 https://ducafecat.com/course/flutter-tim

© 猫哥
ducafecat.com

end