Flutter 弃用 WillPopScope 使用 PopScope 替代方法

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

Flutter 弃用 WillPopScope 使用 PopScope 替代方法

视频

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

前言

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

PopScope

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

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

参考

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 组件累定义得知:

  • canPoptrue,则系统返回手势将导致封闭的 Navigator 照常接收弹出。会调用 onPopInvoked,此时didPoptrue
  • canPopfalse,则系统返回手势不会将路由从封闭的 Navigator 中弹出,但仍然会调用 onPopInvoked 方法,此时 didPopfalse,此时进行逻辑判断或者插入其他需要执行的代码,如果需要返回则再执行 Navigator.of(context).pop();
  • 注意此时 onPopInvoked 又会被再次调用,但此时 didPoptrue
  • 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 学习路径


© 猫哥
ducafecat.com

end

相关文章
|
开发者
Flutter笔记:build方法、构建上下文BuildContext解析
本文主要介绍Flutter中的build方法和构建上下文对象。
726 2
Flutter笔记:build方法、构建上下文BuildContext解析
Flutter Getx 路由 until 方法帮助你跳转指定路由
不少同学都会问我,这样一个场景,当我点击商品列表,进入商品页,点击购买,支付成功后,想返回商品页,或者我的中心的订单列表。怎么做,这中间跨度了 n 个路由。 我不只一次的推荐 GetX 的 until 方法,和 offNamedUntil 方法。 我写了个 demo 今天我们就一起来看下这两个方法如何使用。
2069 0
Flutter Getx 路由 until 方法帮助你跳转指定路由
|
Android开发
flutter中实现仿Android端的onResume和onPause方法
flutter中实现仿Android端的onResume和onPause方法
|
5月前
|
API Android开发 iOS开发
除了permission_handler插件,还有哪些方法可以实现Flutter动态申请权限?
除了permission_handler插件,还有哪些方法可以实现Flutter动态申请权限?
315 68
|
存储 开发框架 JavaScript
深入探讨Flutter中动态UI构建的原理、方法以及数据驱动视图的实现技巧
【6月更文挑战第11天】Flutter是高效的跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称。本文探讨了Flutter中动态UI构建原理与数据驱动视图的实现。动态UI基于Widget树模型,状态变化触发UI更新。状态管理是关键,Flutter提供StatefulWidget、Provider、Redux等方式。使用ListView等可滚动组件和StreamBuilder等流式组件实现数据驱动视图的自动更新。响应式布局确保UI在不同设备上的适应性。Flutter为开发者构建动态、用户友好的界面提供了强大支持。
236 2
|
11月前
|
开发框架 前端开发 定位技术
Flutter框架中的插件市场及开源资源的利用方法。内容涵盖插件市场的扩展功能、时间节省与质量保证
本文深入探讨了Flutter框架中的插件市场及开源资源的利用方法。内容涵盖插件市场的扩展功能、时间节省与质量保证,常见插件市场的介绍,选择合适插件的策略,以及开源资源的利用价值与注意事项。通过案例分析和对社区影响的讨论,展示了这些资源如何促进开发效率和技术进步,并展望了未来的发展趋势。
228 11
|
11月前
|
缓存 前端开发 数据安全/隐私保护
Flutter 框架提供了丰富的机制和方法来优化键盘处理和输入框体验
在移动应用开发中,Flutter 框架提供了丰富的机制和方法来优化键盘处理和输入框体验。本文深入探讨了键盘的显示与隐藏、输入框的焦点管理、键盘类型的适配、输入框高度自适应、键盘遮挡问题处理及性能优化等关键技术,结合实例分析,旨在帮助开发者提升应用的用户体验。
451 6
|
12月前
|
开发者
flutter:总结所有需要用到的方法与实战 (十六)
本文介绍了Flutter中路由和顶部导航的使用方法,包括简单路由、命名路由、返回及返回根路由的实现。同时,详细讲解了顶部导航的定义与属性设置,并通过实战案例展示了复杂布局、新闻列表和页面制作的思路。最后,还提供了父类向子类传递参数的方法以及如何添加依赖库。
119 0
Flutter生命周期方法小技巧
Flutter生命周期方法小技巧
161 0
|
设计模式 JavaScript 开发者
Flutter笔记:聊一聊Flutter中委托的设计方法
Flutter笔记:聊一聊Flutter中委托的设计方法
280 0

热门文章

最新文章

  • 1
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
    225
  • 2
    通过外部链接启动 Flutter App(详细介绍及示例)
    295
  • 3
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    854
  • 4
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    468
  • 5
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    277
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    410
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    199
  • 8
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    214
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    466
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    249