Flutter中实现无Context跳转

背景介绍

Navigator.of(context).push(MaterialPageRoute(builder: (context){
          return DemoPage();
        }));
复制代码

在平常的项目开发中，咱们通常push一个新页面是用上面的方法的，利用Navigator.of(context)来进行push或者pop操做。

缺点：这种状况是必须传context的，目的是为了利用Navigator.of(context)来获取到NavigatorState对象，而后才能进行push或者pop操做。

那若是我要实如今项目的任何地方均可以push一个新页面的话，而这个地方有可能获取不到context，因此这个时候，就须要实现无context跳转。

解决方案

无context跳转，本质就是没必要要咱们每次都去传context参数，而后利用一些操做直接去获取到当前的NavigatorState。

方案1：利用GlobalKey

• 在Flutter中，利用GolbalKey利用获取到对应Widget的State对象。因此，这里，咱们能够经过一个GlobalKey的key值，来获取到NavigatorState对象。
• MaterialApp中包装了WidgetsApp，而WidgetsApp包装了Navigator，而且将 Navigator的key属性做为navigatorKey暴露出来了。因此，咱们能够经过设置navigatorKey，而后利用这个key去获取到NavigatorState对象。

这里贴一下相关的源码，具体的你们能够本身去看源码。 MaterialApp类：

WidgetsApp类：能够看出，咱们定义的navigatorKey，最后是会传给Navigator的key值，因此咱们在外面就能够经过key.currentState()方法来获取到这里的NavigatorState对象了。

class _WidgetsAppState extends State<WidgetsApp> implements WidgetsBindingObserver {

 GlobalKey<NavigatorState> _navigator;

  void _updateNavigator() {
    _navigator = widget.navigatorKey ?? GlobalObjectKey<NavigatorState>(this);
  }
  
  @override
  Widget build(BuildContext context) {
    Widget navigator;
    if (_navigator != null) {
      navigator = Navigator(
        key: _navigator,
        initialRoute: WidgetsBinding.instance.window.defaultRouteName != Navigator.defaultRouteName
            ? WidgetsBinding.instance.window.defaultRouteName
            : widget.initialRoute ?? WidgetsBinding.instance.window.defaultRouteName,
        onGenerateRoute: _onGenerateRoute,
        onUnknownRoute: _onUnknownRoute,
        observers: widget.navigatorObservers,
      );
    }
}
复制代码

简单的代码实现

1. 定义一个GlobalKey< NavigatorState>对象

static GlobalKey<NavigatorState> navigatorKey=GlobalKey();
复制代码

2. 建立MaterialApp的对象的时候，将navigatorKey赋值给MaterialApp。

MaterialApp(
          navigatorKey: Router.navigatorKey,
)
复制代码

3. 使用GlobalKey在任意地方获取NavigatorState对象

navigatorKey.currentState.pushNamed("/login");
复制代码

方案2：利用NavigatorObserver

• NavigatorObserver，看这名字，就知道是能够用来监听Navigator的变化。好比当push一个新页面的时候，Navigator会监听到NavigatorState发生变化，回调didPush（）方法。

注意：NavigatorObserver里面定义了一个NavigatorState对象navigator，因此咱们能够经过自定义NavigatorObserver，而后直接利用这个navigator对象来作页面push或者pop操做，这样的话，咱们就不用本身去利用context去获取navigatorState对象了。

• MaterialApp类，提供了navigatorObservers属性，这样咱们就能够自定义NavigatorObserver去监听Navigator的变化。

  

• NavigatorState类，执行instState对象的时候，会将自身赋值到监听的全部observer对象的_navigator里面。

  

简单的代码实现

1. 自定义NavigatorObserver。

class CustomNavigatorObserver extends NavigatorObserver{
  static CustomNavigatorObserver _instance;

  static CustomNavigatorObserver getInstance() {
    if (_instance == null) {
      _instance = CustomNavigatorObserver();
    }
    return _instance;
  }
}
复制代码

2. 建立MaterialApp的对象的时候，将CustomNavigatorObserver赋值给MaterialApp

MaterialApp(
          navigatorObservers: [CustomNavigatorObserver()],
)
复制代码

3. 使用CustomNavigatorObserver在任意地方进行页面操做

CustomNavigatorObserver.getInstance().navigator.pushNamed("/login");
复制代码

参考文章

其实这类文章掘金上面也有，本身写这篇文章，主要是本身作下总结。

大佬们的文章连接：

Flutter | 经过 ServiceLocator 实现无 context 导航

Flutter上线项目实战——路由篇