当今大前端开发天下,百家争鸣,玲琅满目的框架 、插件害苦了开发人员。
如果你是一名移动端或者前端开发人员,,你还不知道或者还在观望Flutter,这是件多么可怕的事情。
之前对于Flutter我也是持观望态度,随着1.0、1.2版本的发布,果断入坑,理由很简单:
当然人无完人,flutter 现在还是幼婴阶段,插件、控件之类的还不是很多,以及热修复暂时还不支持,不过这些都是迟早解决的事。
入坑以来,发现Flutter 的页面不像安卓那样明确,安卓中就是Activity,IOS中就是UIViewController,H5中就是一个route,我们项目开发基本都会有一个BaseActivity/BaseViewController,今天就为各位带来和其功能以及使用方式差不多的BaseWidget。
Flutter架构系列之网络请求封装
点击下载app,查看效果,或者扫描下方二维码直接安装
话不多说,先上视频。
就问 熟不熟悉!熟不熟悉 !
相信每一个安卓开发人员都很熟悉这种log日志,也是安卓入门必备的技能。
看完效果,我来描述一下BaseWidget所能轻松实现的功能。
新写一个类 ,创建好是这个样子的,简约而大气的模板模式,可以随心所欲的写代码了。
class FirstPage extends BaseWidget {
@override
BaseWidgetState getState() {
// TODO: implement getState
return _FirstPageState();
}
}
class _FirstPageState extends BaseWidgetState {
@override
Widget buildWidget(BuildContext context) {
// TODO: implement buildWidget
return null;
}
@override
void onCreate() {
// TODO: implement onCreate
}
@override
void onPause() {
// TODO: implement onPause
}
@override
void onResume() {
// TODO: implement onResume
}
}
入坑Flutter的时候发觉Flutter的生命周期不是那么明确。
Flutter中所谓的生命周期是在State中,如下简单几个
打日志的时候发现很乱,尤其的build和deactivate两个方法,跳转和回到页面都会调用到,有点像onPause和onResume的集合体,所以就借用了数据结构中的Stack栈 在页面创建的时候存在Stack中,离开的时候移除Stack,然后根据页面存在栈中的位置,结合build和deactivate 调用时机,写出了真正意义上的onPaue和onResume方法。
@override
void initState() {
NavigatorManger().addWidget(this);//入栈
}
@override
void dispose() {
NavigatorManger().removeWidget(this);//出栈
super.dispose();
}
不过这里出现了个情况,就是当BaseWidget作为内部页面嵌入的时候,自己的生命周期不明确,而且也影响外部页面的生命周期,索性就单独整了一个BaseInnerWisget作为内嵌页面的基类,有点类似BaseFragment,不过他的生命周期需要在外部页面中完善些方法才能正确,强迫症的同学可以自己在封装一下~具体使用方法已上传代码,可自行发挥。
生命周期整完以后,就是一些基础布局搭建了,
布局搭建,就是在基类里面的Build方法中先内置了几个基本控件,然后预留一个抽象方法给子类搭建自己的布局。
Widget _getBaseView(BuildContext context) {
return Column(
children: [
_getBaseTopBar(),//状态栏布局
_getBaseAppBar(),//导航栏布局
Container(
width: getScreenWidth(),
height: getMainWidgetHeight(),//子类布局可用的高度
color: Colors.white, //背景颜色,可自己变更
child: Stack(
children: [
buildWidget(context),//子类的布局
_getBaseErrorWidget(),//错误页面布局
_getBaseEmptyWidget(),//空页面布局
_getBassLoadingWidget(),//加载中布局
],
),
),
],
);
}
剩下的事情就是往各个方法里面填写对应的界面,以及暴露出方法让子类修改属性,无非就是设置下 文案,图片,隐藏和显示,都是很基础的啦,具体实现可以自己看代码哈,一定难不倒聪明的你!
作为开发人员,我希望把功能掌握在自己手里,而不是sdk手里,愉快的发车吧!
源码和具体说明已经上传至github欢迎star、fork。
Flutter架构系列之网络请求封装
Flutter/安卓开发交流群:661614986,期待您的加入!