核心理念
化繁为简,最终使用时,简单易用,扩展性强即可。
1.简介
基类的封装,主要是统一管理,实现模板开发。子类只关心自己的展示即可,无需过多的关心其它操作。
2.基类封装的状态管理、路由管理,主要基于GetX。GetX的主要功能有:
2.1 状态管理 路由管理 依赖管理 国际化 主题等
2.2 [GetX官网](https://pub.dev/packages/get)
3.定义基类页面的 状态管理类
/// 主要功能:页面各种状态的切换、网络请求的取消定义
class BaseController extends GetxController {
/// 页面加载状态 在自定义加载类中
var loadingState = LoadingState.loading.obs;
/// 网络请求取消用
CancelToken? cancelToken;
/// 初始化
@override
void onInit() {
super.onInit();
cancelToken = CancelToken();
}
/// 销毁
@override
void onClose() {
cancelToken?.cancel();
cancelToken = null;
super.onClose();
}
/// 重试
void retry() {
showLoading();
// 准备好
onReady();
}
/// 显示成功页面
void showSuccess() {
if (loadingState.value == LoadingState.success) {
return;
}
loadingState.value = LoadingState.success;
}
/// 显示空页面
void showEmpty() {
if (loadingState.value == LoadingState.empty) {
return;
}
loadingState.value = LoadingState.empty;
}
/// 显示错误页面
void showError() {
if (loadingState.value == LoadingState.error) {
return;
}
loadingState.value = LoadingState.empty;
}
/// 显示加载中页面
void showLoading() {
if (loadingState.value == LoadingState.loading) {
return;
}
loadingState.value = LoadingState.loading;
}
}
4.定义基类
基类的主要功能:主要是页面流程的控制,模板开发。标题栏、页面背景、是否显示加载页面 等通用操作的实现
/// 页面基类
abstract class BaseWidget<T extends BaseController> extends GetView<T> {
const BaseWidget({super.key});
/// 状态控制器
@override
T get controller => GetInstance().find<T>(tag: logicTag());
/// 页面的TAG 如果有需要 复写
String? logicTag() {
return null;
}
/// 子类实现:注入控制器
void beforeBuild(BuildContext context) {}
/// 是否显示加载页面
bool showLoadingPage() {
return true;
}
/// 是不是根页面 - 主要控制 背景 和 安全区域
bool isRootPage() {
return false;
}
@override
Widget build(BuildContext context) {
beforeBuild(context);
var child = Scaffold(
backgroundColor: backgroundColor(),
appBar: buildAppBar(context),
body: isRootPage()
? SafeArea(child: _buildChild(context))
: _buildChild(context),
);
return child;
}
/// 加载子类的页面
Widget _buildChild(BuildContext context) {
// 显示加载页面
if (showLoadingPage()) {
return Obx(() => LoadingLayout(
state: controller.loadingState.value,
retry: controller.retry,
contentBuilder: (context) {
return buildChild(context);
}));
}
return buildChild(context);
}
/// 标题相关 ========================================================
/// 是否显示AppBar 默认显示
bool showTitle() {
return true;
}
/// 标题高度
double? titleHeight() {
return null;
}
/// 标题剧中
bool titleCenter() {
return true;
}
/// 是不是 主
bool primary() {
return true;
}
/// 标题背景色
Color? titleBackgroundColor() {
return null;
}
/// 是否显示返回按钮
bool showBack() {
return true;
}
/// 返回按钮的颜色
Color? backColor() {
return Colors.white;
}
/// 右边按钮或控件
List<Widget>? titleActions() {
return null;
}
/// 标题字体
double titleTextSize() {
return 18;
}
/// 标题字体颜色
Color titleTextColor() {
return Colors.white;
}
/// 标题字体样式
FontWeight titleFontWeight() {
return FontWeight.bold;
}
/// 标题
String title() {
return "";
}
/// 构建标题文本
Widget? buildTitle() {
return Text(
title(),
style: TextStyle(
fontSize: titleTextSize(),
color: titleTextColor(),
fontWeight: titleFontWeight(),
),
);
}
/// 构建标题
AppBar? buildAppBar(BuildContext context) {
if (!showTitle()) {
return null;
}
return AppBar(
toolbarHeight: titleHeight(),
centerTitle: titleCenter(),
elevation: 0,
// 阴影高度:0
backgroundColor: titleBackgroundColor(),
leading: showBack()
? BackButton(
color: backColor(),
)
: null,
actions: titleActions(),
title: buildTitle(),
);
}
/// 标题相关 ========================================================
/// 页面背景
Color? backgroundColor() {
return null;
}
/// 构建子View
Widget buildChild(BuildContext context);
}
5.一般基类,不带状态的
/// 一般页面,不带状态的
abstract class NormalWidget extends BaseWidget<BaseController> {
const NormalWidget({super.key});
@override
bool showLoadingPage() {
return false;
}
}
6.使用实例(无状态的案例)
/// 页面使用实例
class HomePage extends NormalWidget {
const HomePage({super.key});
@override
String title() {
return "我是首页";
}
@override
Widget buildChild(BuildContext context) {
/// 子类按需-具体实现
return Container();
}
}