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

最新推荐文章于 2024-08-19 10:18:42 发布
最新推荐文章于 2024-08-19 10:18:42 发布
阅读量296 收藏 4
点赞数 5
分类专栏： 程序员 文章标签： flutter 架构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84149765/article/details/138783422
版权

创建 BasePresenter

通过IModel建立 Presenter 和 Model的联系

import ‘package:flutter_splash_ios/mvp/BaseModel.dart’;

abstract class BasePresenter {

///模型层实例

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 extends State {

@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 {

///通过视图层传递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 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> 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: [

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

}

@override

void onDispose() {

// TODO: implement onDispose

super.onDispose();

counter = 0;

}

void increase() {

counter++;

notifyListeners();

}

///显示模型层(Model)数据

void shoModDat(var _data) {

modDat = _data;

notifyListeners();

}

}

typedef void InitCallBack(MyViewModel vm);

视图层(View)

import ‘package:flutter/cupertino.dart’;

import ‘package:flutter/material.dart’;

import ‘package:pmvvm/views/stateless.view.dart’;

import ‘…/vm/MyViewModel.dart’;

class MyView extends StatelessView {

const MyView({Key? key}) : super(key: key, reactive: true);

@override

Widget render(context, vmodel) {

return Column(

mainAxisAlignment: MainAxisAlignment.center,

crossAxisAlignment: CrossAxisAlignment.center,

children: [

Text(vmodel.modDat.toString()),

SizedBox(height: 24),

RaisedButton(onPressed: vmodel.increase, child: Text(‘Increase’)),

],

);

}

}

import ‘package:flutter/cupertino.dart’;

import ‘package:flutter/material.dart’;

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
enter,

children: [

Text(vmodel.modDat.toString()),

SizedBox(height: 24),

RaisedButton(onPressed: vmodel.increase, child: Text(‘Increase’)),

],

);

}

}

import ‘package:flutter/cupertino.dart’;

import ‘package:flutter/material.dart’;

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-h2clqXqb-1715560402664)]

[外链图片转存中…(img-5hsygLIO-1715560402666)]

[外链图片转存中…(img-2sPr9Xy6-1715560402667)]

[外链图片转存中…(img-uzW63Xy1-1715560402668)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84149765
关注
专栏目录
Flutter 项目实战 架构模式四
2401_84520118的博客
04-30 543
//通过控制层传递实例到模型层///方便控制层从模型层获取数据///通过视图层传递实例到控制层///方便控制层返回数据给视图层V?_view;V?;= null) {通过 initState 函数向控制层 Presenter 传递IView通过 dispose 函数解除对IView的引用@override///子类实现P?_presenter;
Flutter 项目实战 架构模式四(2)
2401_83704218的博客
05-06 948
作为一名从事Android的开发者，很多人最近都在和我吐槽Android是不是快要凉了？而在我看来这正是市场成熟的表现，所有的市场都是温水煮青蛙，永远会淘汰掉不愿意学习改变，安于现状的那批人，希望所有的人能在大浪淘沙中留下来，因为对于市场的逐渐成熟，平凡并不是我们唯一的答案！《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门，即可获取！///显示模型层(Model)数据。
Flutter项目实战
qq627578198的博客
05-20 825
项目名称： 懒大厨 项目已完成，下载可以直接运行看效果 功能 本人练手项目，菜谱类app，前期功能比较较简单，包含以下模块： 用户模块：注册、登录、修改密码 菜品模块：菜品制作过程展示、检索、上新、收藏 技术实现 Provider实现组件的状态管理，做到局部刷新 自定义LoadContainer、ListContainer、SlideListContainer容器等 自定义Dialog，包括LoadingDialog、自定义布局Dialog等 在photo_view、image_picker
Flutter项目实战之Flutter_Gank
AndroidAlvin的博客
12-11 368
阿里P7移动互联网架构师进阶视频（每日更新中）免费学习请点击：https://space.bilibili.com/474380680 先附上几张截图 没有设计，自己怎么想怎么弄的，调用了干活集中营的api，这个号称客户端最多的网站，由于已经过了两个多月才来写这篇博客，由于flutter的更新，现在最新的是6.0dev版本，可能会影响部分功能的使用，但应...
flutter 项目实战一 新建 flutter 项目
weixin_41191134的博客
03-28 2622
本项目借用 逛丢 网站的部分数据，仅作为 flutter 开发学习之用。 逛丢官方网址：https://guangdiu.com/ flutter windows开发环境设置 flutter 项目实战一 新建 flutter 项目 flutter 项目实战二 网络请求 flutter 项目实战三 json数据解析以及Gson格式化flutter 项目实战二 网络请求 flutter 项...
Flutter 项目实战(Dio+MVP+FutureBuilder )五
我很好
01-01 5140
/ 没有感情万千 、只有默默无闻 / 2022年跨年了,又涨了一岁。随着时光的流逝,工作多年的我还是在坚持些代码。互联网都有所谓的大龄危机,我对此毫无畏惧。不要因为社会存在一些大龄危机的恐慌,产生了很多心理上的负担 ,我虽然不再年少轻狂,但激情依旧。 你需要懂的法则就是 : 适者生存,优胜劣汰 。 你朝思暮想的结果就是 : 冰冻三尺,非一日之寒 。 你想太多的结果就是 : 还是在原点 , 人老了 , 留...
Flutter项目实战-我的第一个Flutter项目-了解Flutter项目结构(二）
发果叁
03-20 663
上一章中我们通过编辑器的指导简单的创建了一个Flutter项目，这篇文章我们通过修改一些配置，深入了解一下Flutter项目中的几个关键文件，以及它是如何跨平台的。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
FLutter实战练手商城项目
08-10
Flutter受React启发，虽然工作原理不同，但是玩法跟React类似，Flutter通过自绘制UI的方式，高性能的实现了跨平台APP的开发，值得入手。简单开发即使未来的趋势。
mvc_pattern:Flutter插件可实现MVC设计模式的众多变体之一
03-28
mvc_pattern 请注意，框架包， ，用途mvc_pattern其核心。 软件包允许更轻松（我敢说），更快的开发和更好的可维护性。 借助内置的功能和功能，无需“重新发明轮子”。 容纳和集成功能： 错误处理 系统偏好设定 程序通知 日期选择器 应用颜色选择器 对话框 可自定义的底部栏 载入画面 时区 Flutter框架的“接吻” 为了与保持一致，这是尝试以一种固有的方式向Flutter提供MVC设计模式，并结合了Flutter框架本身的大部分内容。 全部包含在独立的Flutter软件包中。 实际上，所有这些都是因为我想要一个放置我的“可变”代码（应用程序的业务逻辑）而无需编译器抱怨的地方！ 当然，不建议将此类代码放入StatefulWidget或StatelessWidget中-只有不可变的代码应位于这些对象中。 当然，所有这些代码都可以放入State对象。 很好，因为您仍然
Flutter学习-项目实战
yong_19930826的博客
12-21 3426
Flutter学习-项目实战
Flutter模板项目实战指南
最新发布
gitblog_00445的博客
08-19 593
Flutter模板项目实战指南 flutter_templateA Flutter template application showcasing - Clean architecture, Responsive design, State management, Decoupled widgets using the connector pattern, Dependency Injectio...
flutter 项目实战4
jsp13270124的博客
05-19 675
这篇文章来自于我自己的有道云笔记 想看图片去那里 文档：Day 4_8 项目实战以及 国际化.md 链接：http://note.youdao.com/noteshare?id=9a784492b39cbcd20f152885d183c884&sub=2193AB9CCC944AEAA4EA1EC8B8A0BB03 项目实战以及 国际化 问题1 点击左边 然后刷新右边的数据 就是 如何进行组件间的信息传递 我们可以用 事件总线来完成 这个事件的传递 也可以使用Provider完成这个操作 因为这个数
flutter制作博客展示平台，现已支持 Web、macOS 应用、Android 和 iOS
坚果的博客
09-28 591
Flutter Blog Theme using Flutter | Web, macOS, Android, iOS Flutter 最近发布了 Flutter V2.5.1，其性能得到了很大提升，支持 Web、macOS、Android 和 iOS。 这就是为什么今天我们使用在 Web、macOS 应用、Android 和 iOS 应用上运行的 flutter 创建响应式博客主题。 此外，我们创建了一个具有自定义悬停动画的动画网络菜单。 最后，您将学习如何使用 Flutter 制作响应式应用程序。 预
Flutter开发实战
m0_75198698的博客
05-09 205
你可以使用Flutter的各种内置小部件来构建你的应用程序UI。在安装好Flutter之后，你可以使用Flutter命令行工具来创建一个新的Flutter项目。在命令行中运行`flutter create my_flutter_app`，其中`my_flutter_app`是你的项目名称。安装完成后，你可以在命令行运行`flutter doctor`命令来检查你的Flutter环境是否配置正确。编辑完你的应用程序后，你可以运行你的Flutter应用程序。好的，下面是一个简单的Flutter开发实战教程。
flutter项目实例
u010968028的专栏
06-15 746
Flutter Web实战项目打造真正跨平台应用（windows，android，ios，linux，macos，web(1)
2401_84140130的博客
05-15 710
最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！
掌握Flutter MVP模式：使用HTTP GET请求的实战项目
- 根据提供的文件名"Rest-Flutter-MVP-master"，可以推断这是一个Flutter项目，遵循MVP架构模式，并使用HTTP GET方法进行数据交互。 - 项目的文件结构通常包括lib目录（存放Dart代码）和pubspec.yaml文件（定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值