Flutter MVVM架构辅助插件mvvm_builder的使用

插件介绍

mvvm_builder 是一个用于帮助开发者在 Flutter 中实现 MVVM（Model-View-ViewModel）设计模式的插件。MVVM 模式将业务逻辑与视图分离，使代码更易于测试和维护。

安装

要使用该插件，请将其添加到 pubspec.yaml 文件中：

dependencies:
  mvvm_builder: ^版本号

然后运行以下命令安装依赖：

flutter pub get

为什么使用 MVVM 设计模式？

MVVM 设计模式广泛应用于 Android 和 iOS 原生开发中。它是一种优秀的复杂页面解决方案，能够编写可测试的代码并提高性能。

主要优点：

• 将业务逻辑从视图中分离。
• 提高代码的可读性和可维护性。
• 便于单元测试。

使用方法

1. 导入 MVVMPage Widget

首先导入 mvvm_builder 包：

import 'package:mvvm_builder/mvvm_builder.dart';

2. 创建 Model

定义数据模型类 MyViewModel 和其子类 TodoModel：

class MyViewModel extends MVVMModel {
  String title;
  List<TodoModel> todoList;
}

class TodoModel {
  String title, subtitle;

  TodoModel(this.title, this.subtitle);
}

3. 创建 Presenter

创建一个 Presenter 类来处理业务逻辑：

class MyPresenter extends Presenter<MyViewModel, MyViewInterface> {

  MyPresenter(MyViewModel model, MyViewInterface view) : super(model, view);

  [@override](/user/override)
  Future onInit() async {
    // 初始化 ViewModel 数据
    this.viewModel.title = "My todo list";
    this.viewModel.todoList = List();
    for(int i = 0; i < 15; i++) {
      this.viewModel.todoList.add(new TodoModel("TODO $i", "my task $i"));
    }
    this.refreshView(); // 更新视图
  }
}

4. 定义 View 接口

定义一个接口 MyViewInterface 来描述视图的行为：

abstract class MyViewInterface {

  void showMessage(String message);

}

5. 创建页面

方法一：直接使用 MVVMPage

class _MyAppState extends State<MyApp> implements MyViewInterface {
  
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MVVMPage<MyPresenter, MyViewModel>(
        builder: (context, presenter, model) {
          return Scaffold(
            appBar: AppBar(title: Text(model.title)),
            body: ListView.builder(
              itemCount: model.todoList.length,
              itemBuilder: (context, index) => ListTile(
                title: Text(model.todoList[index].title),
                subtitle: Text(model.todoList[index].subtitle),
              ),
            ),
          );
        },
        presenter: MyPresenter(new MyViewModel(), this),
      ),
    );
  }

  [@override](/user/override)
  void showMessage(String message) {
    _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text(message)));
  }
}

方法二：使用 MVVMPageBuilder

class MyAppWithBuilder extends StatelessWidget implements MyViewInterface {

  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
  final mvvmPageBuilder = MVVMPageBuilder<MyPresenter, MyViewModel>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return mvvmPageBuilder.build(
      context: context,
      key: ValueKey("page"),
      presenterBuilder: (context) => MyPresenter(new MyViewModel(), this),
      builder: (context, presenter, model) {
        return Scaffold(
          appBar: AppBar(title: Text(model?.title ?? "")),
          body: ListView.separated(
            itemBuilder: (context, index) => InkWell(
              onTap: () => presenter.onClickItem(index),
              child: ListTile(
                title: Text(model.todoList[index].title),
                subtitle: Text(model.todoList[index].subtitle),
              ),
            ),
            separatorBuilder: (context, index) => Divider(height: 1),
            itemCount: model.todoList.length ?? 0,
          ),
        );
      },
    );
  }

  [@override](/user/override)
  void showMessage(String message) {
    _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text(message)));
  }
}

应用路由

为了保持页面状态，推荐使用 MVVMPageBuilder 并结合路由：

final homePageBuilder = MyAppWithBuilder();

Route<dynamic> route(RouteSettings settings) {
  print("...[call route] ${settings.name}");
  switch (settings.name) {
    case "/":
      return MaterialPageRoute(builder: homePageBuilder.build);
  }
}

void main() {
  print("...[main]");
  runApp(
    MaterialApp(
      onGenerateRoute: route,
    ),
  );
}

测试

MVVM 模式非常适合单元测试，因为它将业务逻辑与视图分离。你可以单独测试 ViewModel 和 Presenter，并且可以轻松模拟不同的 ViewModel 状态。

使用动画

MVVMPage 支持动画效果，可以通过以下方式实现：

class MyApp extends StatelessWidget implements MyViewInterface {

  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
  final MyPresenter mPresenter = MyPresenter.create(null);

  MyApp() {
    mPresenter.init(this);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MVVMPage<MyPresenter, MyViewModel>(
        builder: (context, presenter, model) {
          var animation = CurvedAnimation(
            parent: context.animationController,
            curve: Curves.easeIn,
          );
          return Scaffold(
            key: _scaffoldKey,
            appBar: AppBar(title: Text(model.title)),
            body: ListView.separated(
              itemBuilder: (context, index) => InkWell(
                onTap: () => presenter.onClickItem(index),
                child: AnimatedBuilder(
                  animation: animation,
                  builder: (context, child) => Opacity(opacity: animation.value, child: child),
                  child: ListTile(
                    title: Text(model.todoList[index].title),
                    subtitle: Text(model.todoList[index].subtitle),
                  ),
                ),
              ),
              separatorBuilder: (context, index) => Divider(height: 1),
              itemCount: model.todoList.length,
            ),
          );
        },
        presenter: mPresenter,
        singleAnimControllerBuilder: (tickerProvider) => AnimationController(vsync: tickerProvider, duration: Duration(seconds: 1)),
        animListener: (context, presenter, model) {
          if(model.fadeInAnimation) {
            context.animationController
              .forward()
              .then((value) => presenter.onFadeInAnimationEnd());
          }
        },
      ),
    );
  }

  [@override](/user/override)
  void showMessage(String message) {
    _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text(message)));
  }
}