Flutter MVP实践

1. Flutter 结合 google MVP 架构的理解

在Android 应用开发中，google 官方就给出了对应的demo 展示了mvp的结构。

google demo地址： https://github.com/googlesamples/android-architecture

mvp 的项目结构意为把 UI层和数据层进行分割，让各个层级，做对应的事情，降低耦合程度，同时提高代码可阅读性。

下图可以大概了解m-v-p 的结构关系：

针对Flutter 其实也可以进行对应的mvp架构

Flutter的mvp 架构中，View层就有所改变了，Android中是Activity ，而Flutter中就变成了 State ，为什么是State 而不是StatefulWidget 呢？

其实最主要一点就是Widget的状态表现都在State中体现，也就是说Widget的生命周期都State中。在处理业务逻辑的时候，也是离不开Widget的生命周期的，也就是离不开State的。所以State 作为View层是更加合理的。

而P层和M层其实就和Android 的MVP 没有什么区别了。

来个简单的的项目结构：

• app_views ： 页面，业务相关
  • base：基类
  • contract：接口文件
  • model：数据层文件
  • presenter：P层文件
  • views: 页面Widget文件
• core ：数据库，网络请求相关
• utils： 工具类
• widget： 独立控件
• main.dart ：应用入口

2. View–Presenter层构造

V-P层，更多是相互调用，View层处理UI展示的逻辑，业务的逻辑处理交给P层， P层处理业务逻辑，处理完进行回调给View层进行UI展示。

A. 基类

首先针对State 封装一个BaseState。BaseState 支持泛型接收 StatefuleWidget， 同时接受P层的接口。接收的 StatefuleWidget 是原来的State需要的。

BaseState ：

1. 对State 的 build 方法进行一个简单封装，子类只要实现 buildViews 即可。
2. 然后就是 presenter ,通过getPresenter ，让子类进行实例化。
3. initState 状态也进行简单封装，获取到presenter实体，并赋值给mPresenter。同时抛出一个initViewState给子类去调用。
   View（State）层 就可以通过 mPersenter 调用 P层提供的接口了。

abstract class BaseState<T extends BaseStatefulWidget, E extends IPresenter> extends State<T> {
   
  E mPresenter;
  @override
  void initState() {
   
    mPresenter = getPresenter();
    initViewState();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
   
    return buildViews(context);
  }

  E getPresenter();
  void initViewState();
  Widget buildViews(BuildContext context);
}

BasePresenter:

1. 泛型接收View（State）层的接口
2. 构造方法接收 View （State）实体, 赋值给 view 。方便调用View层接口

ps ：其他代码忽略，其实处理M层数据需要的封装

abstract class BasePresenter<T extends IView> extends IPresenter {
   
    T view;
    BasePresenter(IView v):view = v;
    
    handleError(error, errorCallback callback) {
   
        HttpIOException exception = error as HttpIOException;
        //TODO 可以对报错结果进行一轮处理，例如进行Toast 提示或者其他操作
        callback(exception);
    }
}

typedef errorCallback