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呢?我们先看这个方法里面的<u>返回值</u>,这个很重要。但我们的问题同样不是在这里能解答的,只能继续向上追溯。

 @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这个方法要么执行数组里的第一个WidgetBindingObserverdidPopRoute要么退出应用。感觉这个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;
 },
 ),
 );
 }
}
作者:杯水救车薪

%s 个评论

要回复文章请先登录注册