Flutter MVVM架构插件pmvvm的使用

简介

PMVVM 是一个基于 MVVM 模式的 Flutter 状态管理包，它底层使用了 Provider 和 Hooks。与 BloC 相比，PMVVM 不需要太多的样板代码，更加简洁易用。

该包借鉴了一些 Stacked 包的概念，但采用了更简单和干净的方法。

工作原理

PMVVM 的核心组件有三个：

1. View：代表应用程序的 UI，不包含任何应用逻辑。ViewModel 通过发送通知来更新 View 的 UI。
2. ViewModel：持有状态和事件，作为 Model 和 View 之间的桥梁。ViewModel 是平台无关的，可以轻松绑定到 Web、移动或桌面视图。
3. Model：持有应用数据和业务逻辑，通常是一些简单的类。

使用场景

当你的小部件有自己的事件可以直接改变状态时，例如页面、帖子等，可以使用 PMVVM。

使用方法

1. 构建 ViewModel

class MyViewModel extends ViewModel {
  int counter = 0;

  // 可选
  @override
  void init() {
    // 在 MVVM 小部件的 initState 被调用后调用
  }

  // 可选
  @override
  void onBuild() {
    // 当视图的 `build` 方法被调用时的回调
  }

  void increase() {
    counter++;
    notifyListeners();
  }
}

2. 访问 ViewModel 中的 context

class MyViewModel extends ViewModel {
  @override
  void init() {
    var height = MediaQuery.of(context).size.height;
  }
}

3. 声明 MVVM

class MyWidget extends StatelessWidget {
  const MyWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MVVM<MyViewModel>(
      view: () => _MyView(),
      viewModel: MyViewModel(),
    );
  }
}

4. 构建 View

StatelessView

class _MyView extends StatelessView<MyViewModel> {
  const _MyView({Key key}) : super(key: key, reactive: true);

  @override
  Widget render(context, vmodel) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Text(vmodel.counter.toString()),
        SizedBox(height: 24),
        RaisedButton(onPressed: vmodel.increase, child: Text('Increase')),
      ],
    );
  }
}

HookView

class _MyView extends HookView<MyViewModel> {
  const _MyView({Key key}) : super(key: key, reactive: true);

  @override
  Widget render(context, vmodel) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Text(vmodel.counter.toString()),
        SizedBox(height: 24),
        RaisedButton(onPressed: vmodel.increase, child: Text('Increase')),
      ],
    );
  }
}

5. 使用 MVVM.builder

如果视图很简单，可以使用 MVVM.builder：

class MyWidget extends StatelessWidget {
  const MyWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MVVM<MyViewModel>.builder(
      viewModel: viewModel,
      viewBuilder: (_, vm) {
        return Text(
          vm.counter.toString(),
          textDirection: TextDirection.ltr,
        );
      },
    );
  }
}

高级用法

不可变性和可观察性

PMVVM 支持不可变性和可观察性，通过 Observable 类可以观察变量的变化。

1. 包装变量

/// 'MyCounter' 是变量的别名，这在日志记录中很有用
final counter = Observable<int>('MyCounter');

// 或者

final counter = Observable.initialized(0, 'MyCounter');
final counter = 0.observable('MyCounter');

2. 应用动作

counter.setValue(counter.value + 1, action: 'INCREASE');

3. 消费 Observable

/// 确保在使用 [value] 获取器之前已经初始化
/// 通过检查 [counter.hasValue] 或使用 [counter.valueOrNull] 或 [counter.valueOrDefault]

counter.value;

counter.stream.listen((value) { });

4. 观察和取消观察

class CounterPageVM extends ViewModel {
  final counter = 0.reactive('MyCounter');

  @override
  void init() {
    observe([counter]);
  }

  void increase() {
    counter.setValue(counter.value + 1, action: 'INCREASE');
  }
}

Observable API

模式

1. Naive 方法

使用级联符号初始化 ViewModel 的 widget 属性。这种方法的缺点是当 widget 的依赖项（属性）更新时，ViewModel 不会变得响应式。

class MyWidget extends StatelessWidget {
  const MyWidget({Key key, this.varName}) : super(key: key);

  final String varName;

  @override
  Widget build(BuildContext context) {
    return MVVM<MyViewModel>(
      view: () => _MyView(),
      viewModel: MyViewModel()..varName = varName,
    );
  }
}

2. Clean 方法

类似于 ReactJS，创建一个属性类，将所有 widget 属性保存在其中。

my_widget.props.dart

class MyWidgetProps {
  MyWidgetProps({required this.name});

  final String name;
}

my_widget.vm.dart

class MyWidgetVM extends ViewModel {
  late MyWidgetProps props;

  @override
  void init() {
    props = context.fetch<MyWidgetProps>();
  }
}

my_widget.view.dart

class MyWidget extends StatelessWidget {
  MyWidget({
    Key? key,
    required String name,
  })  : props = MyWidgetProps(name: name),
        super(key: key);

  final MyWidgetProps props;

  Widget build(context) {
    return Provider.value(
      value: props,
      child: MVVM<MyWidgetVM>(
        view: () => _MyWidgetView(),
        viewModel: MyWidgetVM(),
      ),
    );
  }
}

更多关于 PMVVM

• 可以使用 context.fetch<T>(listen: true/false)，等同于 Provider.of<T>(context)
• 可以使用 PMVVMConfig 控制 enableLogging 和 trackObservablesHistory
• 如果不想让视图响应 ViewModel 的状态通知，可以在构造 StatelessView 或 HookView 时将 reactive 设置为 false
• ViewModel 生命周期方法（所有方法都是可选的）

void init() {}
void onDependenciesChange() {}
void onBuild() {}
void onMount() {}
void onUnmount() {}
void onResume() {}
void onPause() {}
void onInactive() {}
void onDetach() {}

FAQ

• 能否在生产环境中使用？
  • 当然可以！它是稳定的，准备好投入使用。
• Stacked 和 PMVVM 有什么区别？

总结来说，PMVVM 更简单、更干净，没有过度包装，且 Idioms 更加清晰。

依赖

• provider
• flutter_hooks
• tint

示例代码

import 'package:flutter/material.dart';
import 'package:example/pages/counter/counter_page.view.dart';

/// import 'package:example/pages/counter_with_observable/counter_page.view.dart';

void main() {
  runApp(MaterialApp(home: CounterPage()));
}

希望这些信息对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时提问。