Flutter插件viper的使用方法介绍

VIPER

一种优雅的方式将VIPER架构引入到Flutter项目中。

示例代码

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

// 定义视图接口
abstract class MyHomeView extends View {
  BehaviorSubject<int> get counter;

  Stream<void> get incrementButtonDidTap;
}

// 定义交互器
class CounterInteractor extends Interactor {
  var _counter = 0;

  int get counter => _counter;

  Stream<int> increment() {
    _counter++;
    return Stream.value(_counter);
  }
}

// 定义路由
class MyHomeRouter extends Router {}

// 定义呈现器
class MyHomePresenter extends Presenter<MyHomeView, MyHomeRouter> {
  late final counterInteractor = CounterInteractor();

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

    // 绑定视图和交互器的数据流
    MergeStream([
      view.stateDidInit.map((event) => counterInteractor.counter),
      view.incrementButtonDidTap.flatMap((value) => counterInteractor.increment())
    ])
        .bind(view.counter)
        .addTo(disposeBag);
  }
}

// 定义模块
class MyHomeModule extends Module<MyHomeView, MyHomePresenter, MyHomeRouter> {
  [@override](/user/override)
  final presenter = MyHomePresenter();

  [@override](/user/override)
  final router = MyHomeRouter();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MyHomeViewImpl();
  }
}

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

// 主应用
class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomeModule(),
    );
  }
}

// 视图实现
class MyHomeViewImpl extends StatefulWidget {
  MyHomeViewImpl({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyHomeViewImplState createState() => _MyHomeViewImplState();
}

class _MyHomeViewImplState extends ViewState<MyHomeViewImpl, MyHomeModule> implements MyHomeView {
  [@override](/user/override)
  final counter = BehaviorSubject<int>.seeded(0);

  [@override](/user/override)
  BehaviorSubject<void> incrementButtonDidTap = BehaviorSubject();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('You have pushed the button this many times:'),
            StreamBuilder<int>(
              stream: counter,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(
                    '${snapshot.data}',
                    style: Theme.of(context).textTheme.headline4,
                  );
                } else {
                  return Text('0');
                }
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => incrementButtonDidTap.add(null),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}