美文网首页Flutter学习
flutter 架构设计(基于 getx 的路由)

flutter 架构设计(基于 getx 的路由)

作者: 简单coder | 来源:发表于2021-12-22 08:26 被阅读0次

    目前的项目架构,是完整依赖于 get 这一框架,pub.dev 中排名第一的like 也证明了其在大众中的喜爱程度.


    lib 下我仅有两个文件夹,common 和 pages

    common

    存放绝大部分可与业务逻辑抽离的抽象接口,公共 widget,公共构造方法,const 值等等,不过目前我也存放了一些与业务耦合的对象,接下来一一解释.

    entiries

    存放 jsonToModel 转出的 model,该层实际与 pages 耦合,目前放在此

    extension

    存放对系统Foundation 类的拖展,目前业务较小,我只拖展了 array 这个方法,将 swift 中的数组的高阶函数拖展了一下




    这里顺便提一下框架中的文件导出,我采用的是将每个文件夹都做成小型的 library 导出



    这样做的好处是,可以减少在使用时头文件的导入,导致业务文件中,import 十分多而且乱,特别是业务页面中,对子控件的引入等等.
    Foundation 类其实都可以拖展一下,毕竟系统类拖展方法这么好的优点一定不能浪费啊, String,image,int,double,date,random等等,后续我会在业务成熟后进行完整的展示的.

    impl

    对系统的抽象代理类,进行抽象,封装成 widget 回调.



    flutter 很多的控件,其中的代理需要我们自己创建一个 widget 去实现,但是有时候我们希望简单实现掉这个类,然后把需要的属性抛出,放到业务中去实现.比如我目前实现的SliverPersistentHeaderDelegateImpl就是实现掉SliverPersistentHeaderDelegate,然后吧 builder,maxExtent,minExtent,shouldRebuild都抛出去,让业务去决定,省去了自己创建类的麻烦.

    langs

    国际化,目前国际化我只是做了单页面切换,这东西需要定义很多的英文,实际使用的时候文本全部都要用英文,不过 getx 可以将国际化的代码简化到极致,只要一个 tr 属性即可实现,十分推荐尝试.



    middlewares

    目前我只做了两个路由中间件,一个是欢迎页面,一个是登录路由,get 的路由功能真的是十分的完美.

    举例登录路由:
    只要在路由页面中绑定一个登录中间件 直接可以实现无耦合的登录判断拦截.

    routes

    业务中最核心的路由模块.全部使用 get 的路由跳转,使用的是命名路由跳转

    names.dart pages.dart routes.dart main.d
    使用命名路由的好处是,业务中页面与页面的跳转解耦,并且,直接就完美实现了远程路由
    路由的 pages 页面,其实 GetPages 甚至提供了一种嵌套路由(children 参数)的方式,你甚至可以提供子路由"/home/detail",但是这种不适用我给远程提供路由,我直接在 names.dart 拼接好所有路由名字即可,到时候远程路由直接复制给后端.
    关于取参方面,远程路由使用
    scheme://host/path?userId=123&personId=123,自己抽个方法去解析出path,然后把参数拼接上去即可.
    本地路由使用arguments还是parameters我有点忘了,但是这两种其中有一种肯定与上面的url 拼接参数方式取参的方式是一样的,直接可以用同一种方式取出来,之前的 demo 我测试过了,不过现在忘了,大家做个测试即可.
    大家一定在写项目的时候,取参一定要保持跟远程路由取参方式一致,这样后面就不需要在修改了,切记切记.(从 iOS 原生转过来的开发开心到哭泣😭,iOSer要实现远程路由得得自己手写多少parse 逻辑)

    service

    存储一些全局服务,或者三方功能模块封装,比如我使用 storage.dart,封装了 shared_preferences.

    store

    存储一些单例,比如当前登录用户 User.loginer,全局单例 AppManager 等

    utils

    封装一些工厂方法,http 请求等等


    value

    存储一写 const 值,比如全局 horizontal 的 padding 等等,全局的本地缓存 key 键等等


    widget

    封装了一些本 APP 风格输入框,按钮,吐丝,图片加载等

    pages

    pages 完全采用一种框架,而且基本不允许变动



    文件夹下

    • index.dart 入口文件,与之前介绍的 library 一样,做成一个 library 库
    • controller.dart Get 控制器,实现页面与逻辑分离
    • state.dart 存放对象
    • view.dart 存放页面
    • widget 文件夹 存放子控件
    • frame文件夹 存放二级页面,pageview 下的子页面等等
      页面框架需要严格按照这个架构设计执行,最好不要自己乱增加文件夹,在协作开发的时候,形成统一规范,这样才能减少 review 的头疼.



      比如上面的分类页面,子控件全部放到 widget 抛出给 view,然后由 view 组装,中间的通信由 controller 做绑定监听,最后 view,controller,state抛出给 index 做成 library.具体的页面设计,对 getx 的状态管理等等,后续我会再开一章讲讲.

    总结

    目前就先总结到此,本篇只是讲解了下
    更新不易,如有帮助到各位看官的,点个喜欢, 谢谢啦~

    最后感谢下列作者大大们的分享
    Flutter实战·第二版 这本书是我的 flutter 的启蒙教育,作者目前在头条,该书由浅入深讲述了 flutter 各个基础的知识点,并且附带了十分优秀的 demo 实现,一直到现在,每每遇到问题,我总是会在这里面去寻找我需要的答案猫哥 我目前所掌握的框架基本是学习其思想
    老孟 Flutter 三百多个组件一一详解,需要的时候就去查查
    flutter 中文网 不用多说,任何一个it 转 flutter 都需要看一遍至少

    相关文章

      网友评论

        本文标题:flutter 架构设计(基于 getx 的路由)

        本文链接:https://www.haomeiwen.com/subject/xxuxqrtx.html