Flutter教程 — 路由管理与Navigator进阶使用(老油条看了都说好!!!)

简介: 在上一节我们已经讲了Flutter路由管理与Navigator基础使用,有兴趣或者对这一块还不太了解的同学可以去看看。但是仅仅这样时不够的在实际项目中这些怎么会够呢???现在让我们来看看这些骚操作…

前言:

在上一节我们已经讲了Flutter路由管理与Navigator基础使用,有兴趣或者对这一块还不太了解的同学可以去看看。

但是仅仅这样时不够的
在实际项目中这些怎么会够呢???现在让我们来看看这些骚操作...
在这里插入图片描述

详解图:

在这里插入图片描述

本节内容:

1.Navigator.pushReplacement
2.Navigator.PushAndRemove
3.Navigator.maybePop与Navigator.canPop
4.FlutterBoost (简单讲讲)详细解读敬请期待~

1.Navigator.pushReplacement(登录界面跳转)

这个东西可真奇妙,为啥呢,因为它会替换!(通过要跳转的界面把当前界面从栈中替换)

假如我们要实现一个登录跳转界面,那么登录之后,用户按返回键是无法退回到登录界面的,普通的push是做不到这一点的,我们需要使用pushReplacement。

onPressed: () {
   //打开首页,并销毁当前页
   Navigator.of(context).pushReplacementNamed('/FirstPage');
   //也可以使用以下方式
   //Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context)=>FirstPage()));
}

这下不就亲亲松松完成了一个最最最常用的功能嘛
在这里插入图片描述

2.Navigator.PushAndRemove(购物车付款)

这也是个非常奇妙的东西呀

假设我们从首页进入到了购物车,购物车里有个好东西,现在要付款了
在这里插入图片描述

付款完之后一般都直接跳回到首页,或者我的界面,没有购物车界面了,这下就要把购物车界面从栈里移除,减小内存.

//跳转到我的界面,并且移除所有的页面直到首页
//          Navigator.of(context).pushNamedAndRemoveUntil(
//              '/MyHomePage', ModalRoute.withName('/FirstPage'));
          Navigator.of(context).pushAndRemoveUntil(
              MaterialPageRoute(builder: (context) => MyHomePage()),
              ModalRoute.withName('/FirstPage'));

太简单了吧,我都怀疑是假的~

3.Navigator.maybePop与Navigator.canPop

Navigator.of(context).canPop()返回一个bool值,表示当前页面是否可以退出.
说实话我没用过,可能是我太菜了,能不能点个赞安慰我一下在这里插入图片描述
看看它的源码:

bool canPop() {
   assert(_history.isNotEmpty);
   return _history.length > 1 || _history[0].willHandlePopInternally;
}

[Route.isFirst], which returns true for routes for which [canPop]判断依据就是看当前路由是否处在栈中“最底部”的位置。

简单来说在首页调用maybePop()是不会退出的,如果在其它页面调用,效果和pop()一样

4.FlutterBoost

FlutterBoost 是阿里系闲鱼技术团队开源的 Flutter 插件,它可以轻松为现有原生应用程序提供 Flutter 混合集成方案。其理念是将 Flutter 像 WebView 那样来使用。FlutterBoost 帮开发者处理 Native 与 Flutter 页面的映射和跳转。

FlutterBoost 的优点

  • 官方的集成方案有诸多弊病,日志不能输出到原生端、存在内存泄漏的问题、资源冗余等等
  • FlutterBoost 的通道的封装使得 Native 调用 Flutter 、Flutter 调用 Native 的开发更加简便
  • FlutterBoost 对于页面生命周期的管理,也梳理的比较整齐
  • FlutterBoost 为阿里出品,已在闲鱼生产环境中使用,正稳定为亿级用户提供服务

需要与原生混编的小伙伴可以先了解起来,关于它的教程小T在连夜编码中.....

欢迎留言纠正 ~ 不妨给个点赞哈哈

相关文章
|
2月前
|
存储 JavaScript 前端开发
盘点主流 Flutter 状态管理库2024
状态管理是每个应用不可缺少的,本文将会盘点下主流的状态管理包。
242 2
盘点主流 Flutter 状态管理库2024
|
12天前
|
容器
flutter 布局管理【详解】
flutter 布局管理【详解】
11 3
|
12天前
|
Android开发
Flutter路由跳转参数处理小技巧
Flutter路由跳转参数处理小技巧
|
12天前
flutter的状态管理学习
flutter的状态管理学习
|
2月前
|
安全 Go 数据安全/隐私保护
Flutter开发笔记:Flutter路由技术
Flutter开发笔记:Flutter路由技术
531 0
|
2月前
|
前端开发 开发者 UED
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
【4月更文挑战第30天】本文介绍了在Flutter中管理图标、字体和样式的做法。Flutter提供`Icons`类用于内置矢量图标,支持第三方图标库如FontAwesome。自定义字体可通过添加字体文件至`assets`目录并配置`pubspec.yaml`,然后使用`TextStyle`设置。借助`ThemeData`,开发者能统一管理应用主题样式,局部样式可覆盖全局。通过集中管理样式,提升代码复用性和应用一致性。
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
|
2月前
|
存储 JavaScript 前端开发
【Flutter 前端技术开发专栏】Flutter 中的状态管理框架(如 Provider、Redux 等)
【4月更文挑战第30天】本文探讨了 Flutter 开发中的状态管理,重点介绍了 Provider 和 Redux 两种框架。Provider 以其简单易用性适合初学者和小项目,而 Redux 则适用于大型复杂应用,保证状态一致性。此外,还提到了 Riverpod 和 BLoC 等其他框架。选择框架时要考虑项目规模、团队技术水平和个人偏好。文章通过购物车应用示例展示了不同框架的使用,并展望了状态管理框架的未来发展。
【Flutter 前端技术开发专栏】Flutter 中的状态管理框架(如 Provider、Redux 等)
|
2月前
|
JavaScript 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
【4月更文挑战第30天】本文探讨了Flutter的Widget和状态管理。Widget是Flutter构建UI的基础,分为有状态和无状态两种。状态管理确保UI随应用状态变化更新,影响应用性能和可维护性。文章介绍了`setState`、`Provider`、`Riverpod`、`Bloc`和`Redux`等状态管理方法,并通过计数器应用展示了其实现。选择合适的状态管理策略对高效开发至关重要。
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
|
2月前
|
前端开发 开发者 iOS开发
【Flutter前端技术开发专栏】Flutter中的路由管理与页面跳转
【4月更文挑战第30天】本文介绍了Flutter的路由管理与页面跳转,包括基本和命名路由管理。基本路由使用`Navigator`的`push`和`pop`方法,如`MaterialPageRoute`和`CupertinoPageRoute`。命名路由则通过路由表注册名称进行跳转,如`Navigator.pushNamed`。此外,还展示了如何通过构造函数、`arguments`和`PageRouteBuilder`进行路由传值。掌握这些知识能提升Flutter开发效率。
【Flutter前端技术开发专栏】Flutter中的路由管理与页面跳转
|
2月前
|
存储 UED 开发者
Flutter的状态管理:setState、Provider、Bloc的使用详解
【4月更文挑战第26天】Flutter状态管理详解:涵盖setState基础,Provider的跨组件共享及Bloc的复杂场景处理。了解这三种方法的优缺点,助力优化应用数据一致性与用户体验。当状态管理需求升级,从简单的setState到Provider的便利,再到Bloc的强大功能,开发者可根据项目规模和复杂度选择合适策略。