Flutter基础类、错误态、加载态、无数据态等封装
2020-03-16 本文已影响0人
Cheney2006
Flutter中页面没有像Android、IOS 定义那么明确，Android中就是 Activity，IOS 中就是 UIViewController。
在Flutter中，几乎所有东西都是Widget。
将Widget视为可视组件（或与应用程序的可视方面交互的组件）。
在项目开发中基本都会有一个 BaseActivity/BaseVIewController，封装一些基本操作及公共部分，参照Android/IOS中 BaseActivity/BaseVIewController实现，在 Flutter也实现同样功能的 抽象的BaseWidget。
实现功能
- 开发页面时，写一个类继承 BaseWidget，就会提示必须要实现的抽象方法，俗称模板模式，要做的事情一目了然。这里将要写的代码定义成一个 Live Templates。
- 导航栏AppBar可以轻松隐藏和设置背景颜色(图片)，其中包含导航栏中的左边返回键、中间的标题、右面的按钮或文本，可以随意设置隐藏和现实，当然可以重写他们的方法，随意设置自己的Widget，实现高度定制。
- 内置了一个错误页面 ，主要用于网络加载出错或服务器返回错误的时候 ，可以直接调方法就显示，不用每个页面都写错误页面，避免需求变更时束手无策。
- 内置一个无数据页面，用于列表无数据时展示。使用方法和功能和错误页面差不多。
- 内置一个loading加载页面，主要用于进入页面时显示一个 loading 视图，默认进入界面就显示，数据加载完成，显示正常内容视图，加载失败话，就显示上面定义的错误视图。
- 进入自动调用 queryData 进行网络请求。
- 内置了安全键盘，在要使用安全键盘页面，初始化一下就可以了。
- 。。。
- 有了基类，以后拓展就很方面（如：返回刷新等）。
实现思路
BaseWidget 是一个有状态的基础 Widget，由两部分组成。
- Widget 定义
abstract class BaseWidget extends StatefulWidget {
@override
BaseWidgetState createState() => getState();
///子类实现
BaseWidgetState getState();
}
此部分在Widget的生命周期内不会发生变化，但可以接受可由其相应的State实例使用的参数，当需要将其添加到窗口上时，可以通过实例化来实现。
- Widget State 定义
abstract class BaseWidgetState<T extends BaseWidget> extends State<T> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
...
}
}
此部分是在Widget的生命周期中变化的部分，并强制每次应用修改时重建Widget的这个特定实例。
此两部分别被子类继承，并要求实现其抽象方法，getState 用于创建继承BaseWidgetState的子类 Widget State实例。
布局搭建
在 BaseWidgetState 中内置了标题栏、错误视图、空页面视图、加载中视图、安全键盘等几个基本控件，预留一个抽象方法buildWidget给子类搭建自己的布局。
@override
Widget build(BuildContext context) {
return _hasSecurityKeyboard
? _buildWidgetWithKeyboard()
: _buildWidgetDefault();
}
///构建默认视图
Widget _buildWidgetDefault() {
///使用appbar，也可直接只有 body 在 body 里自定义状态栏、标题栏
return WillPopScope(
child: Scaffold(
appBar: _buildAppBar(),
body: _buildBody(),
),
onWillPop: _requestPop,
);
}
///构建包含安全键盘视图
Widget _buildWidgetWithKeyboard() {
///WidgetsApp或者MaterialApp,Flutter会自动默认创建一个Navigator
///用于键盘弹出的时候页面可以滚动到输入框的位置
return WillPopScope(
child: KeyboardMediaQuery(
child: Builder(builder: (ctx) {
///初始化键盘监听并且传递当前页面的context
KeyboardManager.init(ctx);
return Scaffold(
appBar: _buildAppBar(),
body: _buildBody(),
);
}),
),
onWillPop: _requestPop,
);
}
///物理返回
Future<bool> _requestPop() {
bool b = true;
if (KeyboardManager.isShowKeyboard) {
KeyboardManager.hideKeyboard();
b = false;
}
return Future.value(b);
}
///子类实现，构建各自页面UI控件 相当于setContentView()
Widget buildWidget(BuildContext context);
///构建内容区
Widget _buildBody() {
return Container(
///内容区背景颜色
color: LcfarmColor.colorF8F9F8,
child: Stack(
children: <Widget>[
Offstage(
offstage: !_isContentWidgetShow,
child: buildWidget(context),
),
_buildErrorWidget(),
_buildEmptyWidget(),
_buildLoadingWidget(),
],
),
);
}
- 通过 _hasSecurityKeyboard控制是否内置安全键盘，子类可以在 initState中通过初始化该字段来实现。
- 同样错误视图、空白视图、加载中视图提供方法让子类控制是否显示，以及设置相应的文字、图片等。
使用方法
- 基本实现代码如下：
class Test extends BaseWidget {
@override
BaseWidgetState getState() {
return _TestState();
}
}
class _TestState extends BaseWidgetState<Test> {
@override
Widget buildWidget(BuildContext context) {
return Container();
}
@override
void queryData() {
}
}
- getState 返回继承BaseWidgetState的 Widget State。
- buildWidget 用于构建当前视图
- queryData用于是否进入查询数据
如有查询，则直接调用网络请求即可。
@override
void queryData() {
_loadData(...)
}
如无需查询数据，则禁用掉即可。
@override
void queryData() {
///进入无需网络请求数据
disabledLoading();
}
- 显示成功视图、错误视图、空白视图
void _loadData(LoadType type) {
AccountService.letterList(
pageNo,
(Pager<LetterModel> pager) {
///暂无数据
if (pager.total == 0) {
showLoadEmpty();
return;
}
pageNo = pager.currentPage;
if (type == LoadType.loadMore) {
letterModels.addAll(pager.list);
} else {
letterModels = pager.list;
}
showLoadSuccess();
},
(HttpError error) {
showLoadFailure(error.code, error.message);
},
);
}
最后
如果在使用过程遇到问题，欢迎下方留言交流。
