Flutter 弃用 WillPopScope 使用 PopScope 替代方法
视频
https://www.bilibili.com/video/BV1aJ4m1n7FZ
前言
原文 https://ducafecat.com/blog/migrating-from-willpopscope-to-pop...
<img src="https://ducafecat.oss-cn-beijing.aliyuncs.com/podcast/2024/04/425a394c101cf8c5a715304b00c71a78.png" alt="PopScope" style="width:33%;" />
了解如何在 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 组件累定义得知:
- 当 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 应用程序的导航逻辑。
感谢阅读本文
如果有什么建议,请在评论中让我知道。我很乐意改进。
© 猫哥
ducafecat.com
end
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。