Flutter MVVM架构代码生成插件umvvm_generator的使用

Flutter MVVM架构代码生成插件umvvm_generator的使用

在本篇文档中，我们将详细介绍如何使用umvvm_generator插件来帮助你在Flutter项目中实现MVVM（Model-View-ViewModel）架构。该插件通过源代码生成器来简化MVVM模式的实现过程。

UMVVM Generator

umvvm_generator是一个用于Umvvm架构库的源代码生成器。

主要文档

主要文档可以在以下链接找到：

https://github.com/red-collar-dev/umvvm/blob/main/packages/umvvm/README.md

重要提示

为了生成测试覆盖率报告，请运行以下命令：

sh coverage.sh

使用示例

我们将通过一个简单的示例来展示如何使用umvvm_generator插件。首先，确保你已经在你的pubspec.yaml文件中添加了umvvm_generator依赖项。

添加依赖

在pubspec.yaml文件中添加以下依赖项：

dependencies:
  umvvm: ^0.1.0
dev_dependencies:
  umvvm_generator: ^0.1.0
  build_runner: ^2.0.0

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

创建ViewModel

创建一个新的ViewModel类，并使用@ViewModel注解标记它。例如：

import 'package:umvvm/umvvm.dart';

class CounterViewModel with ViewModel {
  int _counter = 0;

  void increment() {
    _counter++;
  }

  int get counter => _counter;
}

创建View

接下来，创建一个视图（例如一个StatefulWidget），并在其中使用Provider.of<CounterViewModel>(context)来访问ViewModel。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_view_model.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => CounterViewModel(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('UMVVM Example')),
          body: Center(child: MyWidget()),
        ),
      ),
    );
  }
}

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

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('You have pushed the button this many times:'),
        Text(
          '${viewModel.counter}',
          style: Theme.of(context).textTheme.headline4,
        ),
        ElevatedButton(
          onPressed: () {
            viewModel.increment();
          },
          child: Text('Increment'),
        ),
      ],
    );
  }
}

更多关于Flutter MVVM架构代码生成插件umvvm_generator的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter MVVM架构代码生成插件umvvm_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


umvvm_generator 是一个用于 Flutter 的代码生成插件，旨在帮助开发者快速实现 MVVM（Model-View-ViewModel）架构。通过自动生成代码，开发者可以减少重复劳动，专注于业务逻辑的实现。

安装 umvvm_generator

首先，你需要在 pubspec.yaml 文件中添加 umvvm_generator 和 build_runner 作为开发依赖项：

dev_dependencies:
  umvvm_generator: ^latest_version
  build_runner: ^latest_version

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

使用 umvvm_generator

1. 创建 ViewModel

首先，你需要创建一个 ViewModel 类，并使用 @ViewModel 注解来标识它。例如：

import 'package:umvvm_generator/umvvm_generator.dart';

@ViewModel()
class MyViewModel {
  // ViewModel 逻辑
}

2. 生成代码

在终端中运行以下命令来生成代码：

flutter pub run build_runner build

这将会生成与 ViewModel 相关的代码，包括 MyViewModelProvider 类，以及与之相关的依赖注入代码。

3. 使用生成的代码

在 UI 层（View）中，你可以使用生成的 MyViewModelProvider 来获取 ViewModel 的实例：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'path_to_generated_code/my_view_model_provider.dart';

class MyView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final viewModel = Provider.of<MyViewModelProvider>(context).viewModel;

    return Scaffold(
      appBar: AppBar(
        title: Text('MVVM Example'),
      ),
      body: Center(
        child: Text('Hello, MVVM!'),
      ),
    );
  }
}

4. 依赖注入

umvvm_generator 会自动生成依赖注入代码，你可以通过 Provider 或 GetIt 等依赖注入框架来管理 ViewModel 的实例。

示例项目结构

一个典型的 MVVM 项目结构可能如下：

lib/
|-- models/
|   |-- my_model.dart
|-- viewmodels/
|   |-- my_view_model.dart
|-- views/
|   |-- my_view.dart
|-- main.dart
回到顶部