Flutter 项目实战 架构模式四_flutter mvc(1)

调用顺序 View -> Presenter -> Model ，不可以反向调用，不可以跨级调用。

创建BaseModel

abstract class IModel {
  //待扩展
}

abstract class BaseModel implements IModel {
  //待扩展
}

///获取数据成功回调
typedef SuccessCallback<T> = void Function(dynamic data);

///获取数据失败回调
typedef FailureCallback = void Function();

创建 BasePresenter

通过IModel建立 Presenter 和 Model的联系

import 'package:flutter_splash_ios/mvp/BaseModel.dart';

abstract class BasePresenter<M extends IModel> {
  ///模型层实例
  M? _model;

  M? get model => _model;

  ///通过控制层传递实例
  ///方便控制层从模型层获取数据
  IModel createModel();
}

创建 BaseViewState

BaseView 用于传递Key 用于视图的刷新, 也可以传递其他类型的参数

key 分为 LocalKey (ValueKey、ObjectKey、UniqueKey) ")和 GlobalKey

IView 建立 Presenter(控制层)  和  视图层 (View)  联系

import 'package:flutter/material.dart';

abstract class BaseView extends StatefulWidget {
  BaseView({Key? key}) : super(key: key);

  @override
  BaseViewState createState() => getState();

  ///子类实现
  BaseViewState getState();
}

abstract class BaseViewState<V extends BaseView> extends State<V> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ///导航栏
      appBar: buildAppBar(),

      ///内容区域
      body: buildWidget(),

      ///内容区域背景颜色
      backgroundColor: buildBodyColor(),
    );
  }

  buildWidget();

  buildAppBar() => null;

  Color buildBodyColor() {
    return Color(0xff00FFFFFF);
  }
}

abstract class IView {
  ///开始加载数据
  void startLoading();

  ///加载完成
  void showLoadSuccess();
}

扩展 BasePresenter ，建立 Presenter(控制层)  和  视图层 (View)  联系

import 'package:flutter_splash_ios/mvp/BaseModel.dart';
import 'package:flutter_splash_ios/mvp/BaseViewState.dart';

abstract class IPresenter<V extends IView> {
  ///通过视图层传递IView引用
  void attachView(V? view);

  ///解除IView引用
  void detachView();
}

abstract class BasePresenter<V extends IView, M extends IModel>
    implements IPresenter {
  ///模型层实例
  M? _model;

  M? get model => _model;

  ///通过控制层传递实例到模型层
  ///方便控制层从模型层获取数据
  IModel createModel();

  ///通过视图层传递实例到控制层
  ///方便控制层返回数据给视图层
  V? _view;

  V? get view => _view;

  @override
  void attachView(IView? view) {
    _view = view as V?;
    _model = createModel() as M?;
  }

  @override
  void detachView() {
    if (_view != null) {
      _view = null;
    }
  }
}

通过 initState 函数向控制层 Presenter 传递IView

通过 dispose 函数解除对IView的引用

import 'package:flutter/material.dart';
import 'package:flutter_splash_ios/mvp/BasePresenter.dart';

abstract class BaseView extends StatefulWidget {
  BaseView({Key? key}) : super(key: key);

  @override
  BaseViewState createState() => getState();

  ///子类实现
  BaseViewState getState();
}

abstract class BaseViewState<V extends BaseView, P extends IPresenter>
    extends State<V> implements IView {
  P? _presenter;

  @override
  void initState() {
    // TODO: implement initState
    _presenter = createPresenter();
    if (_presenter != null) {
      ///传递IView引用到控制层(Presenter)
      _presenter!.attachView(this);
    }
    super.initState();
  }

  P? createPresenter();

  @override
  void dispose() {
    // TODO: implement dispose
    if (_presenter != null) {
      ///解除IView引用
      _presenter!.detachView();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ///导航栏
      appBar: buildAppBar(),

      ///内容区域
      body: buildWidget(),

      ///内容区域背景颜色
      backgroundColor: buildBodyColor(),
    );
  }

  buildWidget();

  buildAppBar() => null;

  Color buildBodyColor() {
    return Color(0xff00FFFFFF);
  }
}

abstract class IView {
  ///开始加载数据
  void startLoading();

  ///加载完成
  void showLoadSuccess();
}

视图层、控制层、模型层 需要的 CallBack

import 'package:flutter_splash_ios/mvp/BaseModel.dart';
import 'package:flutter_splash_ios/mvp/BasePresenter.dart';

///视图层、控制层、模型层 需要实现的接口
abstract class CMineModel extends IModel {
  ///控制层调用
  ///获取数据后回传给控制层
  loadData(SuccessCallback s, FailureCallback f);
}

abstract class CMinePresenter extends IPresenter {
  ///由视图层调用
  ///控制层进行加载数据
  loadData();
}

abstract class CMineView {
  ///控制层返回的数据进行展示界面
  loadData(data);
}

模型层 (Model) 实现

import 'package:flutter_splash_ios/mvp/BaseModel.dart';
import 'package:flutter_splash_ios/mvp/buscal/BusCal.dart';

class MMine extends BaseModel implements CMineModel {
  @override
  loadData(SuccessCallback s, FailureCallback f) {
    // TODO: implement loadData

    ///通过接口回调将模型层数据传递给控制层
    s('通过模型层加载的数据');
  }
}

控制层 (Presenter) 实现

import 'package:flutter_splash_ios/mvp/BaseModel.dart';
import 'package:flutter_splash_ios/mvp/BasePresenter.dart';
import 'package:flutter_splash_ios/mvp/buscal/BusCal.dart';
import 'package:flutter_splash_ios/mvp/busimp/MMine.dart';

class PMine extends BasePresenter<CMineView, CMineModel>
    implements CMinePresenter {
  @override
  loadData() {
    // TODO: implement loadData

    ///startLoading可以提示开始加载数据
    view?.startLoading();

    model?.loadData((data) {
      //showLoadSuccess可以提示加载数据完成
      view?.showLoadSuccess();

      view?.loadData(data);
    }, () {});
  }

  @override
  IModel createModel() {
    ///传递模型层实例到控制层
    return MMine();
  }
}

视图层 (View) 调用控制层 (Presenter) 从模型层 (Model) 获取数据

class ImlBaseView extends BaseView {
  @override
  BaseViewState<BaseView, IPresenter<IView>> getState() {
    // TODO: implement getState
    return _ImlBaseViewState();
  }
}

class _ImlBaseViewState extends BaseViewState<ImlBaseView, PMine>
    implements CMineView {
  var _homeMineData = '点击改变数据';

  @override
  loadData(data) {
    print('获取到的数据 $data');
    setState(() {
      _homeMineData = '$data';
    });
  }

  ///传递控制层实例
  ///视图层通过该实例从模型层加载数据
  @override
  PMine? createPresenter() {
    return PMine();
  }

  @override
  void startLoading() {
    print('开始加载数据：startLoading');
  }

  @override
  void showLoadSuccess() {
    print('加载数据完成：showLoadSuccess');
  }

  @override
  buildWidget() {
    // TODO: implement buildWidget
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            '$_homeMineData\n\n\n',
            style: Theme.of(context).textTheme.headline4,
          ),
          FloatingActionButton(
            onPressed: () {
              ///加载数据
              presenter!.loadData();
            },
            tooltip: '改变HomePage数据',
            child: Icon(Icons.assignment_turned_in),
          )
        ],
      ),
    );
  }

  ///改变内容区域背景颜色
  @override
  Color buildBodyColor() {
    // TODO: implement buildBodyColor
    return Colors.green;
  }
}

flutter: 开始加载数据：startLoading
flutter: 加载数据完成：showLoadSuccess
flutter: 获取到的数据 通过模型层加载的数据

/ Flutter MVVM /

PMVVM

Widget 为视图层 从ViewModel获取数据 , 同时也可以改变ViewModel数据,实现互相绑定

ViewModel  负责从模型层获取数据 , 受视图层驱动修改数据

Model 数据来源,可以通过网络,也可以是从本地获取数据

模型层 Model

typedef void IMineModelCallBack(var _modelData);

abstract class IMimeModel {
  void getMineData(IMineModelCallBack callBack);
}

class MineModel implements IMimeModel {
  @override
  void getMineData(IMineModelCallBack callBack) {
    // TODO: implement getMineData

    var _modelData = '首页改变后的数据';

    callBack(_modelData);
  }
}

ViewModel

import 'package:flutter/material.dart';
import 'package:pmvvm/view_model.dart';

class MyViewModel extends ViewModel {
  int counter = 0;
  var modDat = '';

  InitCallBack initCallBack;

  MyViewModel(this.initCallBack); // Optional
  @override
  void init() {
    // It's called after the ViewModel is constructed
    var height = MediaQuery.of(context).size.height;
    initCallBack(this);
  }

  // Optional
  @override
  void onBuild() {
    // It's called everytime the view is rebuilt
  }



### 题外话


我们见过很多技术leader在面试的时候，遇到处于迷茫期的大龄程序员，比面试官年龄都大。这些人有一些共同特征：可能工作了7、8年，还是每天重复给业务部门写代码，工作内容的重复性比较高，没有什么技术含量的工作。问到这些人的职业规划时，他们也没有太多想法。

其实30岁到40岁是一个人职业发展的黄金阶段，一定要在业务范围内的扩张，技术广度和深度提升上有自己的计划，才有助于在职业发展上有持续的发展路径，而不至于停滞不前。

不断奔跑，你就知道学习的意义所在！


> **注意：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题（含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。）**

![](https://img-blog.csdnimg.cn/img_convert/23598bf9c78b6a9fa81c9c817ce0434e.webp?x-oss-process=image/format,png)



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化学习资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618156601)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

务范围内的扩张，技术广度和深度提升上有自己的计划，才有助于在职业发展上有持续的发展路径，而不至于停滞不前。

不断奔跑，你就知道学习的意义所在！


> **注意：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题（含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。）**

[外链图片转存中...(img-wn0rhaOn-1714487878181)]



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化学习资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618156601)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**