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

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

我是阿T一个幽默的程序员 我们下期再见~

添加我为你的好友,领取源码以及Flutter学习资料~

在这里插入图片描述

加入我们吧,一起学习,一起进步~

在这里插入图片描述

  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
使用 Flutter 的 go_router 使用时,您可以探索以下功能和技巧: 1. 命名路由:除了使用路径来导航页面,go_router 还支持命名路由,通过给每个路由规则指定一个唯一的名称,可以更方便地行页面跳转。例如: ```dart final routes = [ GoRoute( path: '/', pageBuilder: (context, state) => HomePage(), name: 'home', ), GoRoute( path: '/details/:id', pageBuilder: (context, state) => DetailsPage(id: state.params['id']), name: 'details', ), ]; ``` 然后,您可以通过名称行页面跳转: ```dart GoRouter.of(context).goNamed('details', params: {'id': '123'}); ``` 2. 参数传递:go_router 允许您在页面之间传递参数。在路由规则中,可以定义参数占位符,然后在页面构建器中获取这些参数并使用它们。例如: ```dart final routes = [ GoRoute( path: '/details/:id', pageBuilder: (context, state) => DetailsPage(id: state.params['id']), ), ]; ``` 在 DetailsPage 中可以通过 `widget.id` 访问传递的参数。 3. 路由拦截和重定向:go_router 允许您在路由跳转之前行拦截和处理。您可以使用 `beforeEnter` 方法来拦截特定的路由,并根据需要执行操作,例如权限验证、参数校验等。还可以使用 `redirectTo` 方法来重定向到其他路由。例如: ```dart final routes = [ GoRoute( path: '/details/:id', pageBuilder: (context, state) => DetailsPage(id: state.params['id']), beforeEnter: (context, state) { // 行权限验证或其他操作 if (!isLoggedIn) { return redirectTo('/login'); } return null; }, ), ]; ``` 4. 页面切换动画:go_router 支持自定义页面切换动画,您可以为每个路由规则定义不同的动画效果。使用 `transitionDuration` 和 `transitionBuilder` 属性来自定义页面切换动画。例如: ```dart final routes = [ GoRoute( path: '/', pageBuilder: (context, state) => HomePage(), transitionDuration: Duration(milliseconds: 500), transitionBuilder: (context, animation, secondaryAnimation, child) { return FadeTransition(opacity: animation, child: child); }, ), ]; ``` 在上述示例中,我们使用了一个渐变的动画效果。 这些是 go_router 的一些使用方法,您可以根据您的实际需求来灵活使用它们。请参考 go_router 的官方文档以获取更多详细信息和示例代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程的平行世界

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值