Flutter中实现无Context跳转的示例

发布时间:2021-02-03 11:44:17 作者:小新
来源:亿速云 阅读:627

这篇文章主要介绍了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

这里贴一下相关的源码,具体的大家可以自己去看源码。

MaterialApp类:

Flutter中实现无Context跳转的示例

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,
)

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

navigatorKey.currentState.pushNamed("/login");

方案2:利用NavigatorObserver

注意:NavigatorObserver里面定义了一个NavigatorState对象navigator,所以我们可以通过自定义NavigatorObserver,然后直接利用这个navigator对象来做页面push或者pop操作,这样的话,我们就不用自己去利用context去获取navigatorState对象了。

Flutter中实现无Context跳转的示例

MaterialApp类,提供了navigatorObservers属性,这样我们就可以自定义NavigatorObserver去监听Navigator的变化。

Flutter中实现无Context跳转的示例

NavigatorState类,执行instState对象的时候,会将自身赋值到监听的所有observer对象的_navigator里面。

Flutter中实现无Context跳转的示例

简单的代码实现

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中实现无Context跳转的示例”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. golang中Context的应用
  2. Flutter如何使用Navigator进行局部跳转页面

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

flutter context

上一篇:Node.js爬虫怎样获取天气和每日问候

下一篇:怎么给Flutter界面切换实现点特效

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》