视图与逻辑分离之道序篇-使用MVVM模式管理状态（GetState）

了解 GetState

❓ 为什么做GetState

Flutter 状态管理方案百花齐放, 从 ScopeModel 到 Provide、MobX, 再到 BLoC、Redux、Provider. 特别是BLoC和Provider， 已经有了大量的用户，但是我在实际使用的时候，发现了这样几个问题：

• 使用不便，需要手动编写大量的样板代码，状态都需要手动注册
• 业务逻辑与UI表现逻辑, 甚至直接与UI耦合。
• 面对大型项目无法清晰的为各层次划清界限, 单元测试代码编写繁琐。

面对这些问题，GetState应运而生

• 自动注册状态: 解放双手, 保护头发
• 极致的速度: GetState提供时间复杂度为O(1)的访问性能, 暴打一众O(N)的状态管理方案
• 便于单元测试: 业务逻辑与UI代码解耦, 妈妈再也不用担心我的单元测试了, 保护头发*2
• 状态时光机: 使用Recorder, 在过去与现在之间穿梭
• 使用灵活: 既支持Provider使用的mutable状态，也支持BLoC,Redux使用的immutable状态
• 强大的兼容性: 如果你已经使用了Provider, Redux, BLoC等状态管理方案, 那么切换到GetState, 你并不需要移除已有的状态管理代码, GetState可以与现有的状态管理方案共存.
  
  
  
  
  
  

GetState : 致力于解决Flutter应用UI与业务逻辑解耦问题的MVVM状态管理方案

进入正题

先放上 Pub 以及 项目地址

欢迎Star, PR, issue

前三个Demo分别介绍ViewModel,View和Model,心急的可以直接跳过, 或者配合教程3阅读Demo3

以下是教程中的Demo源码

• 了解原理 ViewModel的作用: ViewModel登场.dart

• 包装一个View: 带上View.dart

• 自定义 Model: M, V, VM一家要整整齐齐.dart

• 司机上路: 半自动注册状态与跨页状态修改.dart

了解GetState原理 - ViewModel的作用 (Demo0)

按照Flutter的惯例, 第一个Demo当然是选择经典的CounterApp了

不推荐本例中的写法, Demo仅供了解GetState原理

0-确保配置yaml配置正确

dependencies:
  flutter:
    sdk: flutter
  ## 引入get_state
  get_state: <这里填写版本号>

1-编写viewmodel类-countervm

ViewModel负责简单的业务逻辑和操作视图

猜一猜复杂的业务逻辑应该怎么处理

这里的操作Model的方法(如incrementCounter),相当于BLoC中的Event

ViewModel的泛型即Model的类型, 这里直接使用int类型, 当然也可以使用自定义类型, 详见后面"推荐用法"

class CounterVm extends ViewModel {
  // 1.1 在ViewModel的构造中, 提供默认的初始值
  CounterVm() : super(initModel: 0);

  // 1.2 获取Model方法, 这里的model时父类中的属性,其类型用本类泛型指定
  int counter()=> m;

  // 1.3 操作Model方法,
  // 调用 父类中的vmUpdate(M m)方法更新model的值
  void incrementCounter() {
    vmUpdate(m + 1);
  }
}

2-在main方法中注册ViewModel(手动注册方式)

既然有"手动注册"方式, 那么肯定有自动注册方式了, 详见后面的代码

使用 GetIt g = GetIt.instance; 获取GetIt实例.

实际上直接使用GetIt.instance或GetIt.I效果是一样的,且它们都是单例模式. 这里将其赋值给 g,只是为了便于使用.
当然, 推荐命名为 _g

添加 WidgetsFlutterBinding.ensureInitialized();以防止ViewModel注册失败

关于WidgetsFlutterBinding.ensureInitialized()的作用,这里贴出Flutter源码中的说明
"You only need to call this method if you need the binding to be initialized before calling [runApp]."

使用 GetIt.I.registerSingleton<泛型>(构造方法); 以懒单例的方式注册ViewModel

get_it 还有更多注册方式, 这里暂时只介绍懒单例注册方式

GetIt g = GetIt.instance;

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 4.手动注入依赖, 确保View可以获取到ViewModel
  g.registerSingleton(CounterVm());
  runApp(MyApp());
}

3-最后,在UI代码中调用ViewMdoel的方法来操作与获取数据

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('演示:0.极简使用方法'),
          ),
          body: Center(
            child: Text('测试0: ${g().counter()}'),
          ),
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () => g().incrementCounter(),
          ),
        ),
      );
}

Demo1到此结束了, 本例仅供了解GetState原理, 实际使用中, 不建议使用这样的写法.标准写法见Demo3
接下来是包装View的Demo.

---

包装一个View (Demo1)

直接将ViewModel和GetIt实例裸露在外一点也不优雅, 如果封装为View使用起来可就方便多了

0-先确保配置了yaml

yaml内容 跟Demo0一样

1-再编写ViewModel

这里直接使用Demo0中的ViewModel

2-编写View类(MyCounterView)

View类负责UI绘制, 控制UI的逻辑应当尽量放在View里面, 业务逻辑可以放在ViewModel中,
一个ViewModel经常会对应多个View, 根据迪米特原则, 各个View应当在其内部处理好UI绘制逻辑.

View就是最终展示出来的Widget

class MyCounterView extends View {
  @override
  Widget build(BuildContext c, MyCounterViewModel vm) => ListTile(
        title: Text('测试1: ${vm.counter}'),
        trailing: RaisedButton(
          child: Icon(Icons.add),
          onPressed: () => vm.incrementCounter(),
        ),
      );
}

3-将View放到Widget树中

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: '演示:1.初级使用方法',
        home: Scaffold(
          appBar: AppBar(),
          body: Column(children: [
            // 将视图放入需要的地方
            MyCounterView(),
          ]),
        ),
      );
}

3-在main方法中注册依赖

这里还是沿用 Demo0中的方法

包装View的Demo到此结束, 这样的写法适用于Model十分简单的情况, 但实际上如果Model十分简单, 也就失去使用状态管理的意义了, 图一乐也就图一乐，真图一乐还得看Demo3

---

自定义 Model (Demo2)

在实际应用中, Model肯定不会是一个基本类型, 否则也就失去使用状态管理的意义了

✨ 建议自己动手的时候也按照本文中的步骤操作

0-先确保配置了yaml

dependencies:
  flutter:
    sdk: flutter
  ## 1. 引入get_state
  get_state: ^3.3.0

  ## 2- 可以通过引入equatable,省去手动覆写==和hashCode
  equatable: ^1.1.1

1-编写Model(CounterModel)

建立一个简单的状态, 内部有两个变量 number和str
Model有两种写法, 其实本质上没有区别, 先看看写法1

/// 写法1
class CounterModel {
  final int number;
  final String str;

  CounterModel(this.number, this.str);

  // todo 注意, 这里务必覆写==与hashCode, 否则无法正常刷新
  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is CounterModel &&
          runtimeType == other.runtimeType &&
          number == other.number &&
          str == other.str;

  @override
  int get hashCode => number.hashCode ^ str.hashCode;
}

✨ 这里推荐写法2, 使用Equatable贯彻"解放双手,保护头发"的理念.

虽然有IDE加持, 覆写==与hashCode方法并一般不费时间.
但如果Model中的字段很多,频繁修改字段的同时, 还要修改 ==与hashCode方法, 太过麻烦.

/// 写法2: 使用 Equatable
class CounterModel2 extends Equatable {
  final int number;
  final String str;

  CounterModel2(this.number, this.str);

  // todo 这里需要将所有的属性值都放入 props中
  @override
  List