本文已参与「新人创造礼」活动，一同敞开创造之路

根据GetX 搭建通用flutter 项目《二》(界面标准抽象类)

根据GetX 搭建通用flutter 项目《三》(暗黑方式)

根据GetX 搭建通用flutter 项目《四》(国际化)

根据GetX 搭建通用flutter 项目《五》(根据GetX 进行动态改写)

之前一向想把自己工作中总结的东西,写成文档,但也是懒,一向都没动笔.今日在做2022年中回顾的时分,看到之前写的flutter 项目架构这篇文章,才发现,之前只是写了一个最初,然后就没写了.哎,的确懒了,这次也算对自己这半年工作经验的总结,假如哪里有问题,期望大家活跃指出.在随后的文章里,我会把我这两个月工作之余,写的一个**自我笔记**,也给大家共享一下.

您能在这儿看到啥

  • 目录
  1. 项目运转视频
  2. 项目中运用第三方库
  3. 项目目录解说
  4. 界面接口类的解说
  5. 项目中模块目录解说
  6. GetxView 在项目中的运用
  7. 项目地址
  8. vscode 代码块共享,加快开发功率

  • DEMO更新日志

    2022-07-14 完结国际化
2022-06-22 完结暗黑方式功用开发
2022-06-16 完结项目根底架构

  • 中心功用

  • 界面标准接口基类(这是我最想共享一个思路)
  • 列表界面(这是根据基类,做的特定功用的封装)
  • 数据绑定
  • 动态改写 (根据GetX 进行动态改写)
  • 通用缺醒页
  • 网络框架封装
  • 模块开发的模版
  • 暗黑方式 (2022-06-22 开发完结)
  • 国际化(下个版本适配)

项目功用尽管简略,但也算是五脏俱全.项目中根本中心功用,都有了.
而且DEMO中,注视具体,喜爱看代码的也能够直接下载DEMO.

当然我也会在,以后的文章中,逐个的把这些细节解说一下,也算是把自己的主意,通过文章的方式,来展现出来,真是不写不知道,一写吓一跳,原本存在脑子里很明晰的思路,但当我写起来的时分,确真的是无从着笔啊.看来还的多读书多读报,多总结,否则真的就

“啥也不是了”

项目运转视频

项目中运用的第三方库

hzy_normal_widget 是我在运用GetX搭建项目时,总结的一些通用开发控件,便利咱们在开发的时分,减少重复性界面代码的创立.

ttcomment 通用项目的界面接口基类,和一些通用东西类,喜爱的能够点点star.

 # hzy GetX 界面标准
 hzy_normal_widget: ^0.0.2
 # 本地数据存储
 sp_util: ^2.0.3
 # 加载动画
 flutter_easyloading: ^3.0.5
 # 网页加载
 webview_flutter: ^3.0.4
 # 瀑布流
 flutter_staggered_grid_view: ^0.6.1

今日主要共享一下,《目录解说》

  • 根底项目目录如下所示
.
├── components(项目通用组件)
├── config(项目装备项)
├── generated_plugin_registrant.dart
├── init(项目进口装备项)
├── main.dart
├── pages(事务界面)
└── utils(通用东西)
  • 打开后,功用目录如下所示
.
├── components
│ ├── common_drawer_widget.dart
│ ├── common_getx_controller.dart(控制器 基类)
│ ├── common_getx_list_widget.dart(Getx View 列表类 基类)
│ ├── common_getx_widget.dart(Getx View 基类)
│ ├── common_index.dart
│ ├── common_place_holder_widget.dart(通用缺省页)
│ ├── common_state_list_widget.dart(state 列表类 基类)
│ ├── common_state_widget.dart(state 基类)
│ ├── common_web_page.dart(网页)
│ └── common_widgets.dart(通用小组件)
├── config
│ ├── config_index.dart
│ ├── controller(事务层大局控制器)
│ ├── dataconfig(数据装备项)
│ ├── models(共用模型)
│ ├── routers(路由)
│ └── transformers(数据解析器)
├── generated_plugin_registrant.dart
├── init
│ └── application.dart(根视图)
├── main.dart
├── pages
│ ├── common_moduls(通用模块目录)
│ ├── home(主页模块)
│ ├── login_module(登录模块)
│ └── pages_index.dart
└── utils(东西)
   ├── common_sp_util.dart(本地数据存储东西)
   └── utils_tool.dart)

下面我来逐个讲讲,我对我定义的项目架构的认知,假如问题,还请多多指出,更好的学习.

  • components(组件库)
    总的来说,这个文件夹的命名,也是借鉴了小程序.在小程序里自定义组件添加在components文件夹中.相比之下,咱们的确也需求一个这样的文件夹.所以,它就这样诞生了.好了废话不多说.开始解说代码逻辑.
├── components
│   ├── common_drawer_widget.dart
│   ├── common_getx_controller.dart(控制器 基类)
│   ├── common_getx_list_widget.dart(Getx View 列表类 基类)
│   ├── common_getx_widget.dart(Getx View 基类)
│   ├── common_index.dart
│   ├── common_place_holder_widget.dart(通用缺省页)
│   ├── common_state_list_widget.dart(state 列表类 基类)
│   ├── common_state_widget.dart(state 基类)
│   ├── common_web_page.dart(网页)
│   └── common_widgets.dart(通用小组件)

由于这儿面包括的东西相对来说挺有意思的,我会在下一篇文章里具体的解说,我在这儿就简略的共享一下如何运用.

接口类,把咱们平时用到的通用属性,办法,做了一个概括,也算是减少重复性代码

这儿里边主要共享的便是两种类型的接口类.

  1. state 接口类
   1. common_state_widget.dart 基类
   是简略运用的列子


 class NavHomePage extends TTNormalStatefulWidget {
     const NavHomePage({Key? key}) : super(key: key);
     @override
     CommonStateWidget<TTNormalStatefulWidget> getState() {
         return _NavHomePageState();
     }
 }
class _NavHomePageState extends CommonStateWidget<NavHomePage> {
     /// 属性
     ///
     ///
     @override
     bool get safeAreabottm => false;
     @override
     bool get safeAreatop => false;
     /// 生命周期
     ///
     ///
     /// 界面初始化
     @override
     void initDefaultState() {
     super.initDefaultState();
     }
     /// 界面毁掉
     @override
     void initDefaultDispose() {
     super.initDefaultDispose();
     }
     /// 网路请求
     ///
     ///
     /// 构建视图
     ///
     ///
     @override
     Widget createBody(BuildContext context) {
         return CommonDrawerPage(
             drawerWidth: MediaQuery.of(context).size.width * 0.6,
             screenView: HomeListV(),
         );
     }
     /// 触发办法
     ///
     ///
     /// 装备默许数据
     @override
     void configNormalData() {}
}

   2. common_state_list_widget.dart 基类

2. GetView 和 Controller 接口类
1. Getview 基类
2. GetView list 基类
由于这儿触及的代码逻辑和思路比较多,我就不在这儿逐个举例了,我下边把项目中对应运用基类的洁面给大家指出,能够直接在项目中,查看

common_getx_widget.dart 运用案例

common_getx_controller.dart 运用案例

common_getx_list_widget.dart 运用案例

CommonGetXListController 运用案例

  • config(装备文件)
├── config
│ ├── config_index.dart
│ ├── controller(事务层大局控制器)
│ ├── dataconfig(数据装备项)
│ ├── models(共用模型)
│ ├── routers(路由)
│ └── transformers(数据解析器)

controller
这儿包括了大局通用型控制器,比如用户信息控制器等等
dataconfig 结构如下

├── data_config_index.dart
├── font_config.dart(字体装备文件)
├── global_config.dart(工程发动需求初始化的装备文件)
├── http_normal_config.dart(网络域名环境装备文件)
├── hzy_color_config.dart(颜色装备文件)
├── image_path_config.dart(本地图片途径装备文件)
├── normal_string_config.dart(大局通用字符串装备文件)
├── page_id_config.dart(大局通用界面标识装备文件)
└── theme_config.dart(主题装备文件)

models
主要包括了大局通用的用户信息模型、app装备模型等等,
具体更具您app事务来区分.
routers
包括项目中通用路由.假如项目不杂乱,也可把一切路由放到这一个文件下保护
即可,
假如杂乱的话,尽量仍是模块了,完结路由闭环,只需求在这儿,
引入您模块的路由装备即可

  • pages(事务模块)
├── pages
│ ├── common_moduls(通用模块目录)
│ ├── home(主页模块)
│ ├── login_module(登录模块)
│ └── pages_index.dart

能够从文件树型图看出,我这儿把主要就两个模块,一个是主页模块,一个是登录模块,还有一个是为了便利模块开发,创立的一个通用模块目录,事务模块就不讲了,能够去看看代码,咱们来看一下通用模块目录,打开后入下图所示

.
├── components(组件)
├── controllers(控制器)
├── models(事务模型)
├── network(网络请求)
├── pages(视图)
├── routers(路由)
└── tools(东西)

是不是是曾相识,哈哈.我个人的理解模块便是小型车间,已然是小型车间,工厂有的我也有,只是责任不同,我只为我的车间服务,简略来说框架是服务项目,使得项目层次感十足,分工清晰,保护成本低,那已然老大都有了方针,那小弟只需在老大架构根底上,提高自己模块的逼格,始终和大哥步伐共同,就能够事半功倍,何乐而不为呢.所以,在指定自己模块的目录区分的时分,尽量大众化,谁人来了都能够上手.而且大家对全体架构,认知都是一样的,也便利保护和沟通.这儿我就不细讲模块的运用了,否则这边文章何时是个头呢,不过我会在接下来的文章里,独自的具体的共享一下.

至于东西模块,也着实没有特别之处,都是一些,项目用到的整合,这儿就不在独自解说了,就算看了项目 ,也不一定能够为你所用,由于他便是东西啊,你还想怎么样呢,哈哈 这儿借鉴了达叔 曾见说的梗.

好了,暂时先写到这儿了,也是有很多东西想要共享,但是一写起来文章,就发现,彻底不会写,或许仍是写的太少了.
坚持把这个系列写完,随后,也会尝试出视频解说.

一同都刚刚开始,但也如同只是刚刚开始.
喜爱的能够点点赞,你们的鼓励,便是我行进的动力.谢谢
当然接下的时间里我也会总结OC 和 swift 相应的通用项目文章，喜爱的能够点点重视