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在连夜编码中.....

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

相关文章
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
1046 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
API 网络架构
一文带你了解 Flutter 路由
一文带你了解 Flutter 路由
560 5
|
Go 网络架构 开发者
Flutter &鸿蒙next中的路由使用详解【基础使用】
本文介绍了 Flutter 路由系统的使用方法,包括基本路由、命名路由、参数传递、返回参数和动态路由。通过 `Navigator` 类实现页面跳转,支持简单和复杂参数的传递,并可通过 `onGenerateRoute` 实现更灵活的动态路由管理。示例代码展示了如何在实际项目中应用这些技术,帮助开发者构建清晰、易于维护的导航结构。
536 1
|
UED 开发者
flutter:获取对象&路由管理 (四)
本文介绍了Flutter中如何通过Context获取状态对象、使用GlobalKey获取状态对象、基本的路由管理、路由传值、命名路由、返回根路由以及点击图标跳转的方法。示例代码展示了如何在应用中实现这些功能,包括页面跳转、传递参数和返回上一页等操作。
320 0
|
开发框架 Dart Java
Flutter入门进阶之旅(一)-初识Flutter
Flutter 的目标是用来创建高性能、高稳定性、高帧率、低延迟的 Android 和 iOS 应用。并且开发出来的应用在不同的平台用起来跟原生应用具有一样的体验。不同的平台的原生体验应该得到保留,让该应用看起来同整个系统更加协调。不同平台的滚动操作、字体、图标 等特殊的特性 应该和该平台上的其他应用保持一致,让用户感觉就像操作原生应用一样。
314 1
|
容器
flutter 布局管理【详解】
flutter 布局管理【详解】
273 3
|
前端开发 开发者 UED
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
【4月更文挑战第30天】本文介绍了在Flutter中管理图标、字体和样式的做法。Flutter提供`Icons`类用于内置矢量图标,支持第三方图标库如FontAwesome。自定义字体可通过添加字体文件至`assets`目录并配置`pubspec.yaml`,然后使用`TextStyle`设置。借助`ThemeData`,开发者能统一管理应用主题样式,局部样式可覆盖全局。通过集中管理样式,提升代码复用性和应用一致性。
882 0
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
|
存储 JavaScript 前端开发
【Flutter 前端技术开发专栏】Flutter 中的状态管理框架(如 Provider、Redux 等)
【4月更文挑战第30天】本文探讨了 Flutter 开发中的状态管理,重点介绍了 Provider 和 Redux 两种框架。Provider 以其简单易用性适合初学者和小项目,而 Redux 则适用于大型复杂应用,保证状态一致性。此外,还提到了 Riverpod 和 BLoC 等其他框架。选择框架时要考虑项目规模、团队技术水平和个人偏好。文章通过购物车应用示例展示了不同框架的使用,并展望了状态管理框架的未来发展。
599 0
【Flutter 前端技术开发专栏】Flutter 中的状态管理框架(如 Provider、Redux 等)
|
JavaScript 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
【4月更文挑战第30天】本文探讨了Flutter的Widget和状态管理。Widget是Flutter构建UI的基础,分为有状态和无状态两种。状态管理确保UI随应用状态变化更新,影响应用性能和可维护性。文章介绍了`setState`、`Provider`、`Riverpod`、`Bloc`和`Redux`等状态管理方法,并通过计数器应用展示了其实现。选择合适的状态管理策略对高效开发至关重要。
432 0
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
|
前端开发 开发者 iOS开发
【Flutter前端技术开发专栏】Flutter中的路由管理与页面跳转
【4月更文挑战第30天】本文介绍了Flutter的路由管理与页面跳转,包括基本和命名路由管理。基本路由使用`Navigator`的`push`和`pop`方法,如`MaterialPageRoute`和`CupertinoPageRoute`。命名路由则通过路由表注册名称进行跳转,如`Navigator.pushNamed`。此外,还展示了如何通过构造函数、`arguments`和`PageRouteBuilder`进行路由传值。掌握这些知识能提升Flutter开发效率。
538 0
【Flutter前端技术开发专栏】Flutter中的路由管理与页面跳转