Flutter 基于getX搭建通用项目架构
从事flutter开发工作两年多了,做了几个项目,从刚开始的Provider到现在的GetX,Bloc都在项目中使用过,本篇文章结合GetX特性和项目中的实际运用整理了一套基于GetX搭建通用项目架构,代码会上传gitee.特此分享,欢迎探讨交流.适合已经使用GetX做过实际项目的或者对GetX有所了解的人观看。
一. 网络封装
网络主要使用的是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观看。
五.GetX 遇到的坑
六.项目配置项,手动更改环境(后端域名)
七.国际化
八.暗黑模式适配
demo地址请移步: 项目地址
