Flutter Bloc构建轻量级MVVM

最新推荐文章于 2024-08-17 15:19:20 发布

王亟亟

最新推荐文章于 2024-08-17 15:19:20 发布

阅读量1.8k

点赞数

分类专栏： Flutter 混合开发文章标签： flutter android iOS

本文链接：https://blog.csdn.net/ddwhan0123/article/details/103344517

版权

本文介绍了如何使用Bloc构建Flutter的MVVM模式，通过示例展示了Bloc的状态管理和事件处理，详细讲解了sample_bloc和counter_event的实现，强调了Bloc在减少手动状态维护和优化重绘问题上的优势。

摘要由CSDN通过智能技术生成

转载请注明出处王亟亟的大牛之路

有一段时间没有写东西了，然后之前1年多时间一直在做RN相关的业务和一些新技术的调研，外加“沉迷炒币”写文章也就很少了，然后最近因为一些公司框架的调整所以对部分技术做了一些迁移，然后一个比较重要的思路就是用BLOC处理状态机的业务，将肆意安放的的setState()给 MVVM起来，然后把写sample的过程分享一下

什么是Bloc ?

网上有很多铺天盖地的解释啊说明，大多数也是抄来抄去的，这里也就不炒冷饭复制粘贴了，想了解理论知识可以自行google

在这里插入图片描述

源码地址

https://github.com/ddwhan0123/MaiMai/tree/blog_bloc
最近的一些整理包括轮子都会在这个仓库里做，然后某篇文章会单独的拉一个分支来锁版本
本文对应的分支是 blog_bloc

实现效果

在这里插入图片描述

目录结构

在这里插入图片描述

设计思维源于官方sample 把xxx_state.dart(数据/状态本身)
xxx_event(事件流/状态变化的诱因)
xxx_bloc.dart(使二者关联且产生逻辑变更的地方)

业务场景

点位数值整体覆盖加
点位数值整体覆盖减
点位归零重置
点位数值加部分值添加

依赖：

 flutter_bloc: 2.0.1
 equatable: ^1.0.0

equatable :

能够在Dart比较对象通常涉及必须重写==运算符以及hashCode .

flutter_bloc :

谷歌官方的实现，内部通过 Stream，Sink，BehaviorSubject实现(可自行百度，资料比较全)

sample_bloc.dart 状态的承载类

一个很简单的普通对象甚至没有继承链

构造函数在初始化状态机时调用(主要为了初始化bloc的state值)

class PointState {
   
  int x;
  int y;
  int z;

  //构造函数
  PointState(this.x, this.y, this.z);

  //重置操作调用
  factory PointState.reset() {
   
    return PointState(0, 0, 0);
  }

  //部分值修改时调用
  update(int x, int y, int z) {
   
    return PointState(x, y, z);
  }
}

counter_event.dart 事件类

import 'package:meta/meta.dart';
import 'package:equatable/equatable.dart';

import 'counter_state.dart';

abstract class CounterEvent extends Equatable {
   
  const CounterEvent();
}


//重置数据 无需逻辑行为或返回参数,纯粹当指令用
class ButtonPressReset extends CounterEvent {
   
  @override
  List<Object> get props => null;
}

//点位增加 传