【技术创作101训练营】Flutter Routes 路由应用与封装小结

PPT

PPT 超过最大允许上传大小,因此上传为 PDF 格式,同时为 PPT 中制作了一些 GIF 图,在演讲稿中展示;各位老师辛苦了!


演讲文稿

开场:

大家好,非常感谢各位在百忙之中抽时间来听我们的技术分享;和尚今天分享的内容是【Flutter Routes 路由应用与封装小结】;

      (Page 2)和尚准备从如下几点进行介绍,重点是介绍 Flutter Navigator 的应用与封装;

个人简介:

 (Page 3)首先和尚做一个简单的自我介绍;本人 ID阿策小和尚,为什么叫 和尚 呢?说来惭愧,开始是因为一直单身了很久,开始以 和尚 自居,后来做 程序猿 时间久了,慢慢也就秃了,更符合 和尚 的形象了,于是就一直用这个 ID

      和尚目前就职于北京一家一线互联网公司,担任 Android 高级开发工程师一职,同时负责部分 Flutter 跨平台相关工作;同时也一直在学习关注 Flutter相关技术,目前已学习整理 100+ 文章以及有几百万阅读量;自 2018 年开通个人公众号【阿策小和尚】至今,坚持至少每周一更原创技术文章;如下是【腾讯云社区】文章链接,有兴趣的朋友可以了解一下,有机会的话希望可以多多交流;

Flutter Navigator 路由简介:

(Page 4)和尚首先介绍一下 NavigatorRoute 的关系;如这个图所示,直观的表现为多个 Page 页面及其元素称为 Routes 路由,统一由 Navigator管理的;

Route 是一个抽象类,不能被直接实例化,通常由 Android 风格的 MaterialPageRouteiOS 风格的 CupertinoPageRoute 或自定义 PageRouteBuilder 方式处理;

      而 Navigator 就类似于 Android 中的 IntentNavigator 是一个内部类,在 WidgetsApp / MaterialApp / CupertinoApp 中是默认插入的,可以直接使用;

      (Page 5)Page Routes 路由是根据堆栈规则进行管理的,一般以【后进先出】的方式进行页面路由的跳转更新;根据 Flutter 的思想,Everything is Widget! 分析源码可以得到,其路由是通过 Stack 方式来存储的;主要通过 Push 入栈和 Pop 出栈维护管理的;

Flutter Navigator 基本应用(六大金刚):

(Page 6)Navigator的应用相对简单,如脑图所示,主要涉及这六大类,和尚称为【六大金刚】,有的大类下又分为静态方式动态方式两类;和尚接下来逐一介绍;

1. Push 入栈

      (Page 7)首先来介绍最基本的 Push 入栈,分为两种方式,分别为 pushNamed 静态方式和 push 动态方式;

pushNamed 静态方式也称为命名路由方式,其 routeName 需要在路由表中优先注册;而路由跳转离不开传参,通过 RouteSettings.argument 传递到路由中,类似于 AndroidBundle;其中 argumentsObject 类型,通常用 Map 方式绑定多条数据;

push 为动态方式,需要自己定义路由,其转场动画风格主要是通过 AndroidMaterialPageRouteiOSCupertinoPageRoute 来处理;同时也可以通过 PageRouteBuilder 来自定义转场动画;

      (Page 8)Navigator 返回的是 Future 类型的,可以通过 then 方法进行数据回传,接收返回值;

      因直接打开 PPT 无法展示 Gif 图,和尚现在此单独提出;

Page 8 出栈对应 Gif

      (Page 9)对于自定义转场动画,需要设置 pageBuilder 用于构建页面跳转的路由,例如 PageC();而 transitionsBuilder 为转场动画,可以自定义动画类型,包括嵌套动画等;

Page 9 自定义路由对应 Gif

2. Pop 出栈

      (Page 10)pop 为路由出栈方式,不区分静态动态;移除栈内当前 Context 所在栈并回退到上一个页面 Route 中;若需要返回值,可以通过 pop 方法第二个 [T] 任意类型参数进行回传;

Page 10 出栈对应 Gif

3. PopUtil 清空部分栈

      (Page 11)谈起 pop 方法,与之相关联的是 popUtil 方法,可以清空部分栈内 Route 直到需要的页面 Route;查阅其源码就是循环调用 pop 出栈,直到设置的页面 Route;而 popUtil 最典型的使用场景是在连续操作页面之后,退出登录,此时清空栈并回退到首页;

      使用 popUtil 需要注意两点:

(a). 通过 ModalRoute.withName 到指定页面 Route;若回到栈内根 Root 页面,可以通过三种方式;

  1. ModalRoute.withName("/")
  2. (route) => route.isFirst
  3. ModalRoute.withName(Navigator.defaultRouteName)

(b). popUtil 方式不能添加返回参数,和尚尝试过两种方式;第一种可以重写 popUtil 方式,添加返回参数;第二种是借用 Bloc / Provider 或其他状态管理来进行传递数据;均不是最理想方式;

Page 11 清空部分栈对应 Gif

4. PushReplacement 栈内打开新 Route 替换旧 Route

      (Page 12)如图所示,从 PageB -> PageC 使用 PushReplacement 方式会打开将 PageC 添加到栈内并移除当前 PageB

      (Page 13)PushReplacement 的使用也分为 pushReplacementNamed 静态方式和 pushReplacement 动态方式;其使用方式与 push 入栈类似,通过 result 向历史栈进行数据回传;

Page 13 替换旧栈对应 Gif

5. PushAndRemoveUntil 栈内打开新 Route 清空部分旧 Route

      (Page 14)如图所示,从 PageB -> PageC 时,可以清空栈内部分连续 Route,而清空多少个 Route 取决于第三个参数 RoutePredicate

      (Page 15)PushAndRemoveUntil 也区分为 pushNameAndRemoveUntil 静态方式和 pushAndRemoveUtil 动态方式;RoutePredicate 为清空栈至指定 Route,了解其源码是在循环栈内 Route,当与设置的 RoutePredicate 匹配时返回 true,否则继续清除返回 false 未匹配的栈;

Page 15 清空旧栈对应 Gif

6. PopAndPushNamed 栈内清除当前 Route 并打开新 Route

      (Page 16-17)如图所示,从 PageB -> PageC 时,使用 popAndPushNamed 方式,会清除当前 Route 并开启新的 Route;和尚查阅源码,popAndPushNamed 是先执行 pop 之后执行 pushNamed,两步合并为一步;

Page 17 清空当前栈对应 Gif

      (Page 18)以栈内存储方式看,PopAndPushNamedPushReplacement 一样,和尚做了一个对比,为了效果明显,和尚先 PageB 添加一个左进左出的转场动画,此时分别调用,可以看出:PopAndPushNamed 是先关闭当前 Route 再打开新的 Route;而 pushReplacement 直接替换,没有多余的转场动画;

Page 18 PK左侧对应 Gif
Page 18 PK右侧对应 Gif

7. canPop & maybePop 出栈保护

      (Page 19)介绍完六大金刚之后,还有两个出栈保护需要注意;对于出栈的过程,可以通过 canPop 判断栈内 Route 是否存在,防止在栈内没有元素时强制 pop 出栈引起异常;而 maybePop 不仅可以判断还可以执行 Pop 出栈操作,可以在实际场景中灵活应用;

      (Page 20)和尚再以静态方式和动态方式为维度再次回顾一下;动态方式主要包括三类:

  1. push 入栈
  2. pushReplacement 栈内开启新路由替换旧路由
  3. pushAndRemoveUtil 栈内开启新路由并移除部分历史路由

      (Page 21)静态方式可以看作是四类:

  1. pushNamed 入栈
  2. pushReplacementNamed 栈内开启新路由替换旧路由
  3. pushNameAndRemoveUtil 栈内开启新路由并移除部分历史路由
  4. popAndPushNamed 栈内移除当前路由并打开新路由

Flutter Navigator 封装:

(Page 22)为了代码的简洁性,共通性,可扩展性;我们都会维护统一的一个路由管理;接下来和尚根据路由跳转方式不同,简单介绍一下【静态路由封装】和【动态路由封装】两者相辅相成;

静态路由封装

      (Page 23)静态路由主要是是对路由表中绑定的路由进行操作;在应用 通常会采用 Android 风格的 MaterialAppiOS 风格的 CupertinoApp 来进行 runApp() 启动;首先和尚带大家简单了解 MaterialApp 中几个重要属性;

1. home

      当我们进入应用时,会初始化展示 homeWidget

2. routes

routes 为路由表映射,当我们使用静态方式进行路由更新时,首先需要在 routes 中进行绑定;一般 root 页面通常用 / 表示,其他的页面再根据业务模块进行文件层级区分;使用过 ARouter 的朋友一定会非常了解;

注意:一般采用 home Widget 时,路由表中不设置 / 名称的 root 路由;

3. initialRoute

initialRoute 为初始化路由,优先级低于 home,若初始化指定的是正常可用路由时以 initialRoute 指定路由为准;否则以 home 为准;

4. onGenerateRoute

onGenerateRoute 为重要的构造函数,在使用未在 routes 中注册的命名路由时均会在此回调,通过 onGenerateRoute 构造函数进行具体的业务操作或路由守卫等;

5. onUnknownRoute

onUnknownRoute 为当出现异常,onGenerateRoute 无法生成路由时回调;

      (Page 24)和尚提取一个公共的路由映射表,然后通过 ModalRoute.settings 进行逻辑判断,在 onGenerateRoute 回调方法中进行路由管理,对于公共的转场动画也可以在此处理;

动态路由封装

      (Page 25)动态路由封装主要是根据业务逻辑尽可能的提取公共的参数,减少冗余代码;尤其是对于有公共自定义转场动画的路由,使用更加灵活便利;

总结 & 建议:

  (Page 26)介绍完 Flutter Navigator 的应用与封装之后;和尚就自身的体验给大家一点小小的建议:

  1. 不要为了封装而封装,在合适的位置调用合适的方法;不要盲从;
  2. 多学习参考源码和优秀三方库的实践,多观察生命周期函数进行深入理解;
  3. 多动手多尝试,注意异常情况判空处理等;
  4. 三方库很香,依旧建议先学习基本系统方法,然后货比三家,使用最适合自身项目的 pub 库;

      如下是和尚尝试过的几个优秀的三方库,有兴趣的朋友可以了解一下;

      (结束页 Page 27)最后,非常感谢各位的倾听,如果各位有任何问题,可以加这个联系方式,我们线下多多沟通;【谢谢!

来源:腾讯云+社区 & 技术创作101训练营

本站文章资源均来源自网络,除非特别声明,否则均不代表站方观点,并仅供查阅,不作为任何参考依据!
如有侵权请及时跟我们联系,本站将及时删除!
如遇版权问题,请查看 本站版权声明
THE END
分享
二维码
海报
【技术创作101训练营】Flutter Routes 路由应用与封装小结
因 PPT 超过最大允许上传大小,因此上传为 PDF 格式,同时为 PPT 中制作了一些 GIF 图,在演讲稿中展示;各位老师辛苦了!
<<上一篇
下一篇>>