基于GetX 搭建通用flutter 项目《二》(界面规范抽象类)

基于GetX 搭建通用flutter 项目《三》(暗黑模式)

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

基于GetX 搭建通用flutter 项目《五》(基于GetX 进行动态刷新)

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

您能在这里看到啥

• 目录

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

• DEMO更新日志

  2022-06-22 完成暗黑模式功能开发
  2022-06-16 完成项目基础架构
  

• 核心功能

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

项目功能虽然简单,但也算是五脏俱全.项目中基本核心功能,都有了.
并且DEMO中,注视详细,喜欢看代码的也可以直接下载DEMO.

当然我也会在,以后的文章中,一一的把这些细节讲解一下,也算是把自己的想法,通过文章的形式,来展示出来,真是不谢不知道,一写吓一跳,本来存在脑子里很清晰的思路,但当我写起来的时候,确真的是无从下笔啊.看来还的多读书多读报,多总结,不然真的就

“啥也不是了”

项目运行视频

1655945965891735.gif

项目中使用的第三方库

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(工具)

是不是是曾相识,哈哈.我个人的理解模块就是小型车间,既然是小型车间,工厂有的我也有,只是职责不同,我只为我的车间服务,简单来说框架是服务项目,使得项目层次感十足,分工明确,维护成本低,那既然老大都有了方针,那小弟只需在老大架构基础上,提升自己模块的逼格,始终和大哥步伐一致,就可以事半功倍,何乐而不为呢.所以,在指定自己模块的目录划分的时候,尽量大众化,谁人来了都可以上手.并且大家对整体架构,认知都是一样的,也方便维护和沟通.这里我就不细讲模块的使用了,不然这边文章何时是个头呢,不过我会在接下来的文章里,单独的详细的分享一下.

至于工具模块,也着实没有特别之处,都是一些,项目用到的整合,这里就不在单独讲解了,就算看了项目 ,也不一定可以为你所用,因为他就是工具啊,你还想怎么样呢,哈哈 这里借鉴了达叔 曾见说的梗.

好了,暂时先写到这里了,也是有很多东西想要分享,但是一写起来文章,就发现,完全不会写,可能还是写的太少了.
坚持把这个系列写完,随后,也会尝试出视频讲解.

一起都刚刚开始,但也好像只是刚刚开始.