之前一直想把自己工作中总结的东西,写成文档,但也是懒,一直都没动笔.今天在做2022年中回顾的时候,看到之前写的flutter 项目架构这篇文章,才发现,之前只是写了一个开头,然后就没写了.哎,确实懒了,这次也算对自己这半年工作经验的总结,如果哪里有问题,希望大家积极指出.在随后的文章里,我会把我这两个月工作之余,写的一个自我笔记,也给大家分享一下.
基于GetX 搭建通用flutter 项目《二》(界面规范抽象类)
您能在这里看到啥
- 目录
- 项目运行视频
- 项目中使用第三方库
- 项目目录讲解
- 界面接口类的讲解
- 项目中模块目录讲解
- GetxView 在项目中的使用
- 项目地址
- 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(通用小组件)
由于这里面包含的东西相对来说挺有意思的,我会在下一篇文章里详细的讲解,我在这里就简单的分享一下如何使用.
接口类,把我们平时用到的通用属性,方法,做了一个归纳,也算是减少重复性代码
这里里面主要分享的就是两种类型的接口类.
- 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 基类
- GetView 和 Controller 接口类
1. Getview 基类
2. GetView list 基类
由于这里涉及的代码逻辑和思路比较多,我就不在这里一一举例了,我下边把项目中对应使用基类的洁面给大家指出,可以直接在项目中,查看
common_getx_controller.dart 使用事例
- 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(工具)
是不是是曾相识,哈哈.我个人的理解模块就是小型车间,既然是小型车间,工厂有的我也有,只是职责不同,我只为我的车间服务,简单来说框架是服务项目,使得项目层次感十足,分工明确,维护成本低,那既然老大都有了方针,那小弟只需在老大架构基础上,提升自己模块的逼格,始终和大哥步伐一致,就可以事半功倍,何乐而不为呢.所以,在指定自己模块的目录划分的时候,尽量大众化,谁人来了都可以上手.并且大家对整体架构,认知都是一样的,也方便维护和沟通.这里我就不细讲模块的使用了,不然这边文章何时是个头呢,不过我会在接下来的文章里,单独的详细的分享一下.
至于工具模块,也着实没有特别之处,都是一些,项目用到的整合,这里就不在单独讲解了,就算看了项目 ,也不一定可以为你所用,因为他就是工具啊,你还想怎么样呢,哈哈 这里借鉴了达叔 曾见说的梗.
好了,暂时先写到这里了,也是有很多东西想要分享,但是一写起来文章,就发现,完全不会写,可能还是写的太少了.
坚持把这个系列写完,随后,也会尝试出视频讲解.
一起都刚刚开始,但也好像只是刚刚开始.
网友评论