Flutter插件viper_gen的使用方法

VIPER Gen

VIPER Gen 是一个用于生成 VIPER 模块的工具。

如何使用Flutter插件viper_gen

首先，你需要在你的 presenter 类上标记 @presenter 注解。以下是一个简单的例子：

import 'package:viper/viper.dart';
import 'package:viper/annotation.dart';

// 该文件将由生成器自动生成，请确保与源文件保持一致
part 'presenter.g.dart';

// 使用 @presenter 注解标记 presenter 类
@presenter
class MyPresenterImpl extends MyPresenter
    // 添加状态和绑定函数
    with _$MyPresenterImpl
    implements MyViewDelegate, MyInteractorDelegate {

  // 需要创建一个新的实例
  MyPresenterImpl._();

  // 绑定状态与绑定函数
  factory MyHomePresenterImpl() => _$BoundMyPresenterImpl(); 

  // 手动声明一个状态，这将跳过生成
  final incrementButtonDidTap = BehaviorSubject<void>();

  // incrementButtonDidTap 状态将绑定到此函数
  void $counterDidIncrement() {}
}

完整示例Demo

步骤 1: 创建一个新项目

首先，创建一个新的 Flutter 项目：

flutter create viper_example
cd viper_example

步骤 2: 添加依赖

在 pubspec.yaml 文件中添加 viper 和 rxdart 依赖：

dependencies:
  flutter:
    sdk: flutter
  viper: ^0.1.0  # 请根据实际情况选择最新版本
  rxdart: ^0.27.3  # 请根据实际情况选择最新版本

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

步骤 3: 创建 Presenter 类

在项目中创建一个名为 presenter.g.dart 的文件，并在其中定义 MyPresenterImpl 类：

import 'package:viper/viper.dart';
import 'package:viper/annotation.dart';
import 'package:rxdart/rxdart.dart';

// 该文件将由生成器自动生成，请确保与源文件保持一致
part 'presenter.g.dart';

// 使用 @presenter 注解标记 presenter 类
@presenter
class MyPresenterImpl extends MyPresenter
    // 添加状态和绑定函数
    with _$MyPresenterImpl
    implements MyViewDelegate, MyInteractorDelegate {

  // 需要创建一个新的实例
  MyPresenterImpl._();

  // 绑定状态与绑定函数
  factory MyHomePresenterImpl() => _$BoundMyPresenterImpl(); 

  // 手动声明一个状态，这将跳过生成
  final incrementButtonDidTap = BehaviorSubject<void>();

  // incrementButtonDidTap 状态将绑定到此函数
  void $counterDidIncrement() {}
}

步骤 4: 创建 View 类

创建一个名为 view.dart 的文件，并定义 MyViewImpl 类：

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

class MyViewImpl extends StatelessWidget implements MyViewDelegate {
  final MyPresenter _presenter;

  MyViewImpl(this._presenter);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('VIPER Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Hello, VIPER!'),
            RaisedButton(
              onPressed: () {
                _presenter.incrementButtonDidTap.add(null);
              },
              child: Text('Increment Counter'),
            ),
          ],
        ),
      ),
    );
  }
}

步骤 5: 创建 Interactor 类

创建一个名为 interactor.dart 的文件，并定义 MyInteractorImpl 类：

import 'package:viper/viper.dart';

class MyInteractorImpl implements MyInteractorDelegate {
  [@override](/user/override)
  void onCounterDidIncrement() {
    print('Counter incremented');
  }
}

步骤 6: 创建 Router 类

创建一个名为 router.dart 的文件，并定义 MyRouterImpl 类：

import 'package:viper/viper.dart';

class MyRouterImpl implements MyRouterDelegate {
  [@override](/user/override)
  void routeToNextScreen() {
    print('Routing to next screen');
  }
}

步骤 7: 主入口文件

最后，在主入口文件 main.dart 中初始化并启动应用：

import 'package:flutter/material.dart';
import 'package:viper/viper.dart';
import 'presenter.dart';
import 'view.dart';
import 'interactor.dart';
import 'router.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ViperModule<MyPresenter, MyView, MyInteractor, MyRouter>(
        presenterFactory: MyHomePresenterImpl,
        viewFactory: (presenter) => MyViewImpl(presenter),
        interactorFactory: () => MyInteractorImpl(),
        routerFactory: () => MyRouterImpl(),
      ),
    );
  }
}