FlutterWillPopScope拦截返回事件原理示例详解

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

一、 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");
          
          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");
          
          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();
          }
          
          return false;
        },
      ),
    );
  }
}

以上就是Flutter WillPopScope拦截返回事件原理示例详解的详细内容，更多关于Flutter WillPopScope拦截返回的资料请关注编程网其它相关文章！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉