从事flutter开发工作两年多了,做了几个项目,从刚开始的Provider到现在的GetX,Bloc都在项目中使用过,本篇文章结合GetX特性和项目中的实际运用整理了一套基于GetX搭建通用项目架构,代码会上传gitee.特此分享,欢迎探讨交流。
老规矩，先上效果。
 首页
|
 商品分类
|
 资讯
|
 购物车
|
 我的
|
|---|
一. 网络封装
网络主要使用的是dio 和 retrofit来实现的,关于dio的封装,思路基本上和网上的教程大同小异.大致思路就是创建options对象,设置超时时间,域名,responseType,超时时间等等.然后在创建dio单例对象,给dio对象添加拦截器,我基本上添加三个拦截器分别为
* MiddleInterceptor (获取请求路径,请求参数,打印日志)
* ErrorInterceptor (获取错误原因,打印日志)
* ApiResultInterceptor(获取后端返回结果,处理逻辑,数据返回,比如多设备登录同一账号异常处理等等)
在这里代码就不贴出来了,有兴趣的可以下载demo查看.
为什么要使用retrofit?
retrofit是一个非常好用强大的代码生成器,支持POST GET PATCH PUT等请求.定义好请求方法,返回类型执行一行命令就会自动生成代码,在Controller中直接使用自己使用好的model即可.
常用命令:
* flutter packages pub run build_runner build
* flutter pub run build_runner build --delete-conflicting-outputs
代码定义如下所示
/// 列表接口
@GET("searchV5")
Future<Result<InfoWorkModel>> getInfoListData(
@Query('pn') int page,
@Query('ps') int pageSize,
@Query('q') String name,
@Query('t') String t,
);
/// 详情接口
@GET("pc/items/info")
Future<Result<InfoWorkModel>> getInfoDetailData(
@Query('entityId') int entityId,
);
/// 点赞接口
@POST("thumbsUpOrDown")
Future<Result<InfoWorkModel>> likeThumbsUpOrDown(
@Body() Map<String, String> param);
Result 类里面就是返回的最外层数据包括
code,msg,data其中data是一个泛型T可以接受任何类型,然后再定义data里面对象,也就是InfoWorkModel,这样层层定义保障每个对象都转化成modle即可.
yaml如下代码所示:
dependencies:
retrofit: '>=4.0.0 <5.0.0'
dio: ^4.0.6
dev_dependencies:
retrofit_generator: '>=5.0.0 <6.0.0'
build_runner: '>=2.3.0 <4.0.0'
json_serializable: ^4.4.0
二. 路由设计
将真心话使用了GetX之后基本就不需要路由设计了,GetX都封装好了,在这里就说几个Api吧.
1.跳转界面
Get.toNamed('/test');
2.跳转界面传值
Get.toNamed('/test', arguments: {'id': '0'});
3.跳转界面并执行页面返回事件(比如刷新数据)
Get.toNamed("/test",)?.then((value) { print('执行事件'); });
4.返回上一界面
Get.back();
5.返回上一界面并回调传值
Get.back(result: { 'id':1 });
6.返回上一界面并关闭当前页面
Get.offNamed("/test");
7.返回上一界面并关闭之前所有页面
Get.offAll("/test");
8.返回指定页面
Get.until((route) => Get.currentRoute == '/test');
三.状态管理
1.使用GetBuilder:
在buildContent中直接返回GetBuilder,然后在Controller中数据发生变化后调用update()方法整个页面都会发生变化，适合列表页面的开发。
GetBuilder<HomeController>(
builder: (_) {
return Container();
},
);
2.使用RxX..和Obx()配合使用进行小部件的状态刷新。
关于状态管理的设计原理：参考这篇文章
四.Base类设计
- BaseView 设计
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get_state_manager/get_state_manager.dart';
abstract class BaseView<T> extends GetView<T> {
BaseView({Key? key}) : super(key: key);
/// 状态栏高度
double statusBarH = ScreenUtil().statusBarHeight;
/// 导航栏高度
double navBarH = AppBar().preferredSize.height;
/// 安全区域高度
double safeBarH = ScreenUtil().bottomBarHeight;
/// 设置背景颜色
Color? contentColor;
/// 设置标题文字
String? navTitle;
/// 设置导航栏颜色
Color? navColor;
/// 设置左边按钮
Widget? leftButton;
/// 设置左边宽度
double? leftWidth;
/// 设置右边按钮数组
List<Widget>? rightActionList;
/// 是否隐藏导航栏
bool? isHiddenNav;
/// 设置主主视图内容(子类不实现会报错)
Widget buildContent();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: contentColor ?? Colors.white,
appBar: isHiddenNav == true
? null
: AppBar(
backgroundColor: navColor ?? Colors.white70,
title: Text(
navTitle ?? '',
),
leading: leftButton ?? const SizedBox(),
leadingWidth: leftWidth ?? 0,
actions: rightActionList ?? [],
),
body: buildContent());
}
}
新创建的widget都继承自BaseView 这样在集成于BaseView 的widget中可以方便设置和获取一些常用的页面属性以及完成页面基本布局。
- BaseController 设计
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
enum NetState {
/// 初始状态
initializeState,
/// 加载状态
loadingState,
/// 错误状态,显示失败界面
errorState,
/// 错误状态,只弹错误信息
erroronlyTotal,
/// 错误状态,显示刷新按钮
errorshowRelesh,
/// 没有更多数据
noMoreDataState,
/// 是否还有更多数据
hasMoreDataState,
/// 空数据状态
emptyDataState,
/// 数据获取成功状态
dataSussessState,
}
abstract class BaseController extends SuperController {
/// 定义网络状态方便子控制器使用
NetState netState = NetState.initializeState;
@override
void onReady() {
super.onReady();
initData();
}
@override
void onDetached() {
debugPrint("a11111");
}
@override
void onInit() {
// TODO: implement onInit
super.onInit();
}
@override
void onInactive() {
debugPrint("a11112");
}
@override
void onPaused() {
//彻底离开回调
debugPrint("a11113");
}
@override
void onResumed() {
//彻底恢复回调
debugPrint("a11114");
}
void initData();
}
这个类不需要多说就是重写了一下Getx的生命周期方法，以及添加了一个网络状态的属性,为什么把网络状态加在BaseController中呢？稍后再讲。
分析：正常来说到了这一步就可以利用这两个base来做项目了，无非就是在Controller里面请求数据，然后根据接口的返回在Controller里面更新netState网络状态，然后在widget里面根据netState的状态，判断返回LoadingWidget，或者EmptyWidget，或者ErrorWidget，数据请求成功返回SussessWidget，总之需要在widget里面写大量的判断逻辑，并且凡是涉及到根据网络请求接口返回来展示页面(实际上90%都是这样)的都要把这些判断复制一遍，非常麻烦，那么重点来了：
- BaseCommonView 设计
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get_demo/base/base_view.dart';
import 'package:get_demo/widget/loading_widget.dart';
import '../widget/empty_status.dart';
import 'base_common_controller.dart';
import 'base_controller.dart';
abstract class BaseCommonView<T> extends BaseView<T> {
BaseCommonView({Key? key}) : super(key: key);
/// 创建空视图 (子视图实现的话 Widget就是子视图实现的)
Widget creatEmptyWidget() {
return const EmptyStatusWidget(
emptyType: EmptyStatusType.noMessage,
);
}
/// 创建错误视图 (子视图实现的话 Widget就是子视图实现的)
Widget creatFailWidget(BaseCommonController controller) {
return EmptyStatusWidget(
emptyType: EmptyStatusType.fail,
refreshTitle: '重新加载',
width: 1.sw,
height: 1.sh,
onTap: () {
/// 重新请求数据
controller.getnetworkdata(controller.configNetWorkParmas());
},
);
}
/// 创建页面主视图
Widget creatCommonView(BaseCommonController controller, Widget commonView) {
return _refresherListView(controller, commonView);
}
Widget _refresherListView(
BaseCommonController controller, Widget commonView) {
if (controller.netState == NetState.loadingState) {
/// loading 不会有这个状态,只是写一个这样的判断吧(控制器里面已经封装好了单例了,防止在网络层直接操作控制不了loading的场景)
return const LoadingWidget();
} else if (controller.netState == NetState.emptyDataState) {
/// 返回站位视图
return creatEmptyWidget();
} else if (controller.netState == NetState.errorshowRelesh) {
/// 返回站位刷新视图
return creatFailWidget(controller);
} else if (controller.netState == NetState.dataSussessState) {
return commonView;
} else if (controller.netState == NetState.initializeState) {
return const SizedBox();
} else {
return const Center(child: Text('未知情况,待排查'));
}
}
}
继承自BaseCommonView的widget（view）只需要调用creatCommonView方法，
然后将自己绑定的controller(继承BaseCommonController稍后会讲)和自己页面（view）将要实现的页面widget传递BaseCommonView就可以了，在BaseCommonView中会根据controller中的网络状态(这就是把网络状态定义在BaseController中的原因了，子类都要使用不需要每次都创建了)展示不同的widget，这样就不需要在每个页面中进行重复的判断了，然后如果想自定义EmptyStatusWidget那么只需要在子页面重写creatEmptyWidget方法或者creatFailWidget方法就可以了。
- BaseCommonController 设计
和BaseCommonView配套的还有BaseCommonController。方便网络请求的方法和一些参数调用。
import 'package:pull_to_refresh/pull_to_refresh.dart';
import '../../base/abstract_network.dart';
import '../../base/base_controller.dart';
/**
* 普通视图控制器
* */
abstract class BaseCommonController extends BaseController
with AbstractNetWork {
@override
void getnetworkdata(Map<String, dynamic> info) {
// TODO: implement getnetworkdata
}
@override
Map<String, dynamic> configNetWorkParmas() {
// TODO: implement configNetWorkParmas
throw UnimplementedError();
}
}
BaseCommonController就是为了方便在子Controller进行网络请求而设计的。子类直接重写网络请求方法getnetworkdata和设置Map就可以了，不需要重复定义。BaseCommonController混入with AbstractNetWork类。
-
AbstractNetWork 设计
image.png
6.总结：有了这几个base类在开发中就非常方便了，只需要注意自己的widget（view）和业务逻辑controller就行了，不需要在view中进行繁琐的判断了，还是非常适合快速开发的，另外在项目里面还有针对列表设计的BaseListController和BaseListView使用方法和BaseCommonView大同小异，在这里就不贴代码了，感兴趣的可以自己下载 demo观看。
总体设计图
六.架构升级
新增state状态层，负责定义属性，赋值等操作。因为随着业务的增加，一个页面在业务层既要定义属性又要处理逻辑代码维护起来很是头层。
七.局部刷新方法
为了性能考虑，有些需要局部刷新的页面，就不需要刷新全部。有两种方法实现吧。
1.使用Obx来实现，在需要改变的widget外面嵌套一层Obx，当状态改变时只刷新被Obx包裹的widget。
2.使用GetBuilder来实现，多个GetBuilder使用同一个CounterController的变量，但是我们只想更新其中一个GetBuilder的变量，就可以在添加id参数
update(["id"]); // 只对id为“id”的GetBuilder
view层
GetBuilder<CounterController1>( // 不刷新
builder: (controller){
return Text(
"count的值为：${counter.count}",
style: const TextStyle(color: Colors.redAccent,fontSize: 20),
);
},
八.GetX 遇到的坑
跳转相同页面时比如说:1-2-3-2,会发现2页面的数据不会刷新,这是GetX内部的缓存机制造成,传一个唯一tag值就可以了.
六.项目配置项,手动更改环境(后端域名)
实际开发中会有开发换进,测试环境,发布环境,正式环境等,每次给测试发包会很麻烦,所以就做了一个切换环境的功能.思路就是通过全局环境一个字段来进行读取baseUrl,有需要直接看代码即可,思路很简单.
demo地址请移步: 项目地址
