Flutter WillPopScope拦截返回事件原理示例详解
一、 WillPopScope用法
WillPopScope本质是一个widget用于拦截物理按键返回事件(Android的物理返回键和iOS的侧滑返回），我们先了解一下这个类, 很简单，共有两个参数，子widget child和用于监听拦截返回事件的onWillPop方法
const WillPopScope({
super.key,
required this.child,
required this.onWillPop,
}) : assert(child != null);
下面我们以Android为例看一下用法,用法很简单
body: WillPopScope(
child: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Text("back")
),
onWillPop: () async {
log("onWillPop");
/**返回 true 和不实现onWillPop一样，自动返回,
*返回 false route不再响应物理返回事件，拦截返回事件自行处理
*/
return false;
},
),
在需要拦截返回事件的页面添加WillPopScope后，返回值为false时，点击物理返回键页面没有任何反应，需要自己实现返回逻辑。
二、使用WillPopScope遇到的问题
当flutter项目中只有一个Navigator时，使用上面的方式是没有问题的，但是一个项目中往往有多个Navigator,我们就会遇到WillPopScope失效的情况（具体原理后面会解释）,先来看一个嵌套示例
主页面main page, 由于MaterialApp就是一个Navigator, 所以我们在里面嵌套一个Navigator,示例只写关键代码
main page
body: WillPopScope(
child: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Navigator(
onGenerateRoute: (RouteSettings settings) => MaterialPageRoute(builder: (context) {
return FirstPage();
}),
)
),
onWillPop: () async {
print("onWillPop");
/**返回 true 和不实现onWillPop一样，自动返回,
*返回 false route不再响应物理返回事件，拦截返回事件自行处理
*/
return true;
},
first page, 嵌入到主页，创建路由可以跳转第二页
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return WillPopScope(
child: Center(
child: InkWell(
child: const Text("第一页"),
onTap: () {
//跳转到第二页
Navigator.push(context, MaterialPageRoute(builder: (context) {
return SecondPage();
}));
},
)),
onWillPop: () async {
//监听物理返回事件并打印
print("first page onWillScope");
return false;
});
}
}
第二页
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async{
//监听物理返回事件并打印
print("second page onWillPop");
return false;
},
child: const Center(
child: Text("第二页"),
),
);
}
}
运行后会发现，点击返回键只有主页的onWillPop 监听到了物理返回事件，第一页和第二页的onWillPop没有任何反应
I/flutter: onWillPop
看上去只响应了最初的Navigator,嵌套后的Navigator的监听没有任何效果，为什么会出现这样的问题呢？下面是对WillPopScope原理的讲解，如果只想看解决办法请直接跳到文章最后。
三、 WillPopScope原理
我们先看WillPopScope的源码,WillPopScope的主要源码就是下面两段，很容易理解，就是在UI或者数据更新后，对比onWillPop有没有变化并更新。
@override
void didChangeDependencies() {
super.didChangeDependencies();
if (widget.onWillPop != null) {
_route?.removeScopedWillPopCallback(widget.onWillPop!);
}
//获取ModalRoute
_route = ModalRoute.of(context);
if (widget.onWillPop != null) {
_route?.addScopedWillPopCallback(widget.onWillPop!);
}
}
@override
void didUpdateWidget(WillPopScope oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.onWillPop != oldWidget.onWillPop && _route != null) {
if (oldWidget.onWillPop != null) {
_route!.removeScopedWillPopCallback(oldWidget.onWillPop!);
}
if (widget.onWillPop != null) {
_route!.addScopedWillPopCallback(widget.onWillPop!);
}
}
}
重点看这一段,获取ModalRoute并将onWillPop注册到ModalRoute中
_route = ModalRoute.of(context);
if (widget.onWillPop != null) {
//该方法就是将onWillScope放到route持有的_willPopCallbacks数组中
_route?.addScopedWillPopCallback(widget.onWillPop!);
}
进入到ModalRoute中，看到注册到_willPopCallbacks中的onWillPop在WillPop中被调用，注意看当 onWillPop返回值为false时，WillPop的返回值为RoutePopDisposition.doNotPop。
这里解决了一个小疑点，onWillPop返回值的作用，返回false就不pop。但是还没有解决我们的主要疑问，只能接着往下看。
@override
Future<RoutePopDisposition> willPop() async {
final _ModalScopeState<T>? scope = _scopeKey.currentState;
assert(scope != null);
for (final WillPopCallback callback in List<WillPopCallback>.of(_willPopCallbacks)) {
if (await callback() != true) {
//当返回值为false时，doNotPop
return RoutePopDisposition.doNotPop;
}
}
return super.willPop();
}
接着找到调用WillPop的方法，是一个MaybePop的方法，这个方法里包含了同一个 Navigator里面页面的弹出逻辑，这里我们不做分析，感兴趣的可以自己研究。但是如果涉及到不同的Navigator呢？我们先看这个方法里面的返回值，这个很重要。但我们的问题同样不是在这里能解答的，只能继续向上追溯。
@optionalTypeArgs
Future<bool> maybePop<T extends Object?>([ T? result ]) async {
final _RouteEntry? lastEntry = _history.cast<_RouteEntry?>().lastWhere(
(_RouteEntry? e) => e != null && _RouteEntry.isPresentPredicate(e),
orElse: () => null,
);
if (lastEntry == null) {
return false;
}
assert(lastEntry.route._navigator == this);
final RoutePopDisposition disposition = await lastEntry.route.willPop(); // this is asynchronous
assert(disposition != null);
if (!mounted) {
// Forget about this pop, we were disposed in the meantime.
return true;
}
final _RouteEntry? newLastEntry = _history.cast<_RouteEntry?>().lastWhere(
(_RouteEntry? e) => e != null && _RouteEntry.isPresentPredicate(e),
orElse: () => null,
);
if (lastEntry != newLastEntry) {
// Forget about this pop, something happened to our history in the meantime.
return true;
}
switch (disposition) {
case RoutePopDisposition.bubble:
return false;
case RoutePopDisposition.pop:
pop(result);
return true;
case RoutePopDisposition.doNotPop:
return true;
}
}
那又是谁调用了maybePop方法呢, 那就是didPopRoute, didPopRoute方法位于_WidgetsAppState 中
@override
Future<bool> didPopRoute() async {
assert(mounted);
// The back button dispatcher should handle the pop route if we use a
// router.
if (_usesRouterWithDelegates) {
return false;
}
final NavigatorState? navigator = _navigator?.currentState;
if (navigator == null) {
return false;
}
return navigator.maybePop();
}
根据层层的追溯，我们现在来到下面的方法,这个方法很好理解，也是让我很疑惑的地方。for循环遍历_observes数组中的所有WidgetsBindingObserver。但是——注意这个转折 如果数组中的第一个元素的didPopRoute方法返回true,那么遍历结束，如果返回false那么最终会调用SystemNavigator.pop(),这个方法的意思是直接退出应用。也就是说handlePopRoute这个方法要么执行数组里的第一个WidgetBindingObserver的didPopRoute要么退出应用。感觉这个for循环然并卵。
那为什么要讲这个方法呢，因为应用监听到物理返回按键事件后会调用这个方法。
@protected
Future<void> handlePopRoute() async {
for (final WidgetsBindingObserver observer in List<WidgetsBindingObserver>.of(_observers)) {
if (await observer.didPopRoute()) {
return;
}
}
SystemNavigator.pop();
}
现在我们知道了，应用监听到物理返回按键事件后会调用handlePopRoute方法。但是handlePopRoute中要么调用_observers数组的第一个item的didPopRoute方法，要么就退出应用。也就是说想要监听系统的返回事件要有一个注册到_observers的WidgetBindingObserver并且还要是_observers数组里的第一个元素。通过搜索_observers的相关操作方法可以知道_observers添加元素只用到了add方法，所以第一个元素永远不会变。那谁是第一个WidgetBindingObserver呢？那就是上文提到的_WidgetsAppState， 而_WidgetsAppState会持有一个NavigatorKey，这个NavigatorKey 就是应用最初Navigator的持有者。
综上，我们了解了应用的物理返回键监听逻辑，永远只会调用到应用的第一个Navigator，所以我们所有的监听返回逻辑只能用系统的第一个Navigator里面实现。那对于嵌套的Navigator我们该怎么办呢？
四、嵌套Navigator无法监听物理返回按键的解决办法
既然不能直接处理嵌套Navigator的物理返回事件，那就只能曲线救国了。 首先去掉无效的WillPopScope。
first page
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: InkWell(
child: const Text("第一页"),
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return SecondPage();
}));
},
));
}
}
second page
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const Center(
child: Text("Second page"),
);
}
}
重头戏来到了main page里面, 还是将onWillPop设置为false。拦截所有的物理返回事件。只需要给Navigator设置一个GlobalKey,然后在onWillPop中实现对应navigator的返回逻辑。
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
GlobalKey<NavigatorState> _key = GlobalKey();
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: WillPopScope(
child: Center(
child: Navigator(
key: _key,
onGenerateRoute: (RouteSettings settings) => MaterialPageRoute(builder: (context) {
return FirstPage();
}),
)
),
onWillPop: () async {
print("onWillPop");
if(_key.currentState != null && _key.currentState!.canPop()) {
_key.currentState?.pop();
}
/**返回 true 和不实现onWillPop一样，自动返回,
*返回 false route不再响应物理返回事件，拦截返回事件自行处理
*/
return false;
},
),
);
}
}
以上就是Flutter WillPopScope拦截返回事件原理示例详解的详细内容，更多关于Flutter WillPopScope拦截返回的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了Android自定义控件实现水波纹效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
Android之IphoneTreeView带组指示器的ExpandableListView效果
在正在显示的最上面的组的标签位置添加一个和组视图完全一样的视图，作为组标签。这个标签的位置要随着列表的滑动不断变化，以保持总是显示在最上方，并且该消失的时候就消失2013-06-06
Android自定义Seekbar滑动条 Pop提示跟随滑动按钮滑动
这篇文章主要为大家详细介绍了Android自定义Seekbar滑动条，Pop提示跟随滑动按钮滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
目前正在做的项目，为了增加用户的体验度，准备增加一些动画效果。本文将通过Android Flutter实现仿闲鱼动画效果，感兴趣的可以尝试一下2023-02-02
这篇文章主要介绍了Android中的WebView详细介绍,本文讲解了WebView的概念、使用方法、各种使用实例等,需要的朋友可以参考下2015-06-06
Android SeekBar 自定义thumb旋转动画效果
某些音乐播放或者视频播放的界面上，资源还在加载时，进度条的原点（thumb）会显示一个转圈的效果。这篇文章主要介绍了Android SeekBar 自定义thumb thumb旋转动画效果,需要的朋友可以参考下2021-11-11
这篇文章主要介绍了Android 屏幕截屏方法汇总的相关资料,需要的朋友可以参考下2016-02-02
本文主要介绍Android 消息机制,这里整理了消息机制的详细资料，和经常出现的问题，希望能帮助大家对消息机制的理解2016-08-08
这篇文章主要介绍了Flutter实战之自定义日志打印组件详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
TextView是用来显示文本的组件。这篇文章给大家详细介绍了Android TextView常用属性 ，需要的朋友参考下2018-04-04
最新评论