Flutter MVVM架构插件new_mvvm的使用

new_mvvm 是一个用于 Flutter 的 MVVM 架构插件，它帮助开发者更容易地实现 MVVM（Model-View-ViewModel）模式。MVVM 是一种设计模式，旨在将用户界面（View）与业务逻辑（ViewModel）分离，同时通过数据绑定将两者连接起来。

安装 new_mvvm

首先，你需要在 pubspec.yaml 文件中添加 new_mvvm 依赖：

dependencies:
  flutter:
    sdk: flutter
  new_mvvm: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

1. 创建 Model

Model 是应用程序的数据层，通常包含业务逻辑和数据操作。

class User {
  String name;
  int age;

  User({required this.name, required this.age});
}

2. 创建 ViewModel

ViewModel 是 Model 和 View 之间的桥梁，它负责处理用户交互和更新 View。

import 'package:new_mvvm/new_mvvm.dart';

class UserViewModel extends ViewModel {
  User _user = User(name: 'John Doe', age: 25);

  String get userName => _user.name;
  int get userAge => _user.age;

  void updateUser(String name, int age) {
    _user = User(name: name, age: age);
    notifyListeners(); // 通知 View 更新
  }
}

3. 创建 View

View 是用户界面，它通过 ViewModel 获取数据并显示。

import 'package:flutter/material.dart';
import 'package:new_mvvm/new_mvvm.dart';

class UserView extends StatelessWidget {
  final UserViewModel viewModel = UserViewModel();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Profile'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Name: ${viewModel.userName}'),
            Text('Age: ${viewModel.userAge}'),
            ElevatedButton(
              onPressed: () {
                viewModel.updateUser('Jane Doe', 30);
              },
              child: Text('Update User'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 绑定 ViewModel 和 View

在 new_mvvm 中，你可以使用 ViewModelProvider 来将 ViewModel 绑定到 View。

import 'package:flutter/material.dart';
import 'package:new_mvvm/new_mvvm.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ViewModelProvider(
        viewModel: UserViewModel(),
        child: UserView(),
      ),
    );
  }
}

高级用法

1. 数据绑定

new_mvvm 支持数据绑定，你可以使用 Binding 来将 ViewModel 中的数据自动更新到 View。

class UserView extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final viewModel = ViewModelProvider.of<UserViewModel>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('User Profile'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Binding<String>(
              value: viewModel.userName,
              builder: (context, value) {
                return Text('Name: $value');
              },
            ),
            Binding<int>(
              value: viewModel.userAge,
              builder: (context, value) {
                return Text('Age: $value');
              },
            ),
            ElevatedButton(
              onPressed: () {
                viewModel.updateUser('Jane Doe', 30);
              },
              child: Text('Update User'),
            ),
          ],
        ),
      ),
    );
  }
}

2. ViewModel 生命周期

new_mvvm 提供了 ViewModel 的生命周期方法，你可以在 ViewModel 中重写这些方法以执行初始化或清理操作。

class UserViewModel extends ViewModel {
  [@override](/user/override)
  void onInit() {
    super.onInit();
    // 初始化操作
  }

  [@override](/user/override)
  void onDispose() {
    super.onDispose();
    // 清理操作
  }
}