Flutter开发模式之Bloc学习

1.为什么要使用Bloc

Bloc可以将展示层的代码与业务逻辑分开，从而使您的代码快速，易于测试且可重复使用。

Bloc采用类似观察者模式的响应式编程，它试图通过调节何时可以发生 状态更改 并在整个应用程序中强制采用一种 更改状态 的方式来使 状态更改 可预测。

Bloc attempts to make state changes predictable by regulating when a state change can occur and enforcing a single way to change state throughout an entire application.

 2.流(Stream)

实现Bloc的一个核心API就是Stream，流（Stream) 是一系列异步的数据，Streams可以想象成一个有水流过的管道。管道就是“流”（Stream)，管道里的水是异步的数据。

Stream功能有点类似于 Android 中的 EventBus 或者 RxBus，是一个数据流订阅管理工具。Stream 可以接收任何对象，包括另外一个 Stream。在Flutter的Stream流模型中，StreamController 的 sink声明了Stream的入口，发布对象通过 sink来添加数据，然后通过 StreamController 发送给 Stream，而订阅者则通过调用Stream的listen()方法来进行监听，listen()方法会返回一个 StreamSubscription 对象，StreamSubscription 对象支持对数据流进行暂停、恢复和取消等操作。

创建Stream

我们可以通过创建一个 async * (异步生成器) 方法在Dart中创建一个 Stream。

Stream countStream(int max) async* {
    for (int i = 0; i < max; i++) {
      yield i;
    }
  }

通过将一个函数标记为 async *，我们可以使用 yield 作为关键字并返回 Stream 数据。在上面的示例中，我们返回的是一个不超过整数Int边界的整数Stream。

每次我们在 async * 函数中 yield 时，我们都会通过 Stream 推送该数据。

3.Bloc介绍

Bloc的模式示意图

 

使用BLoC方式进行状态管理时，应用里的所有组件被看成是一个事件流，一部分组件可以订阅事件，另一部分组件则消费事件。

实现方式为组件通过Sink向Bloc发送事件，BLoC接收到事件后执行内部逻辑处理，并把处理的结果通过流的方式通知给订阅事件流的组件。在BLoC的工作流程中，Sink接受事件输入，BLoC则对接受的内容进行处理，最后再以流的方式输出。

理解Bloc的运作原理要有几个重点关注对象，分别是事件、状态、转换和流。 

- 事件（event）：在Bloc中，事件会通过Sink输入到Bloc中，通常是为了响应用户交互或者是生命周期事件而进行的操作。

 - 状态 (state)：用于表示Bloc输出的东西，是应用状态的一部分。它可以通知UI组件，并根据当前状态重建其自身的某些部分。 

- 转换 ：从一种状态到另一种状态的变动称之为转换，转换通常由当前状态、事件和下一个状态组成。 

- 流：表示一系列非同步的数据，Bloc建立在流的基础之上。

BLoC Widget

BlocBuilder

BlocBuilder是flutter_bloc提供的一个基础组件，用于构建组件并响应组件新的状态，它通常需要Bloc和builder两个参数

BlocBuilder(
        cubit: widget._counterBloc,
        builder: (BuildContext context, CounterState currentState) {
    }
)

 

BlocProvider

BlocProvider是一个Flutter的组件（StatefulWidget），可以通过BlocProvider.of (context)向其子级提供bloc。它也可以作为依赖项注入到组件中，从而将一个bloc实例提供给子树中的多个组件使用。

CounterBloc bloc = BlocProvider.of(context);

4.利用Bloc完成计数器Demo 

4.1 使用flutter_bloc之前，需要先在工程的pubspec.yaml配置文件中添加库依赖

dependencies:
  flutter:
    sdk: flutter
  bloc: ^6.0.0
  flutter_bloc: ^6.0.0

 使用flutter packages get命令将依赖库拉取到本地，然后就可以使用flutter_bloc库进行应用开发了。

可以在android-->build gradle里设置maven来提高拉取速度

    repositories {
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }

4.2 首先创建一个event事件

class PressAddEvent extends CounterEvent {
  @override
  Stream applyAsync(
      {CounterState currentState, CounterBloc bloc}) async* {
    yield CounterIncreaceState(++currentState.num);
  }
}
class PressDecreaseEvent extends CounterEvent {
  @override
  Stream applyAsync(
      {CounterState currentState, CounterBloc bloc}) async* {
    yield CounterIncreaceState(--currentState.num);
  }
}

这里设置了两个事件，分别是增加和减少的。

4.3 新建一个Bloc类，用于对计数器的状态进行管理

class CounterBloc extends Bloc {
  CounterBloc(CounterState state) : super(CounterIncreaceState(0));

  @override
  Stream mapEventToState(CounterEvent event) async* {
    if(event is PressAddEvent){
      yield* event.applyAsync(currentState: state, bloc: this);
    }
    else{
      yield* event.applyAsync(currentState: state, bloc: this);
    }

  }
}

4.4 新建一个state类，用来保存状态

@immutable
abstract class CounterState {
  int num;
}

class CounterIncreaceState extends CounterState {
  int num=0;
  CounterIncreaceState(this.num);
}

（使用idea开发的可以直接搜索bloc组件安装，如下图所示，然后可以直接一键生成bloc，三个文件分别是bloc，event和state，）

4.5 使用Bloc之前，需要在应用的上层容器中进行注册。然后，再使用BlocProvider.of (context)获取注册的Bloc对象，通过Bloc处理业务逻辑。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: BlocProvider(
          create: (context) => CounterBloc(CounterIncreaceState(0)),
          child: MyHomePage(title: 'Flutter Demo Home Page'),
        ));
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    CounterBloc _counterBloc = BlocProvider.of(context);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: MainPage(counterBloc: _counterBloc),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          FloatingActionButton(
              key: const Key('counterView_add_floatingActionButton'),
              child: const Icon(Icons.add),
              onPressed: () {
                _counterBloc.add(PressAddEvent());
              }),
          FloatingActionButton(
              key: const Key('counterView_decrease_floatingActionButton'),
              child: const Icon(Icons.remove),
              onPressed: () {
                _counterBloc.add(PressDecreaseEvent());
              })
        ],
      ),
    );
  }
}

运行结果如下图所示：

 

使用flutter_bloc框架，不需要调用setState()方法也可以实现数据状态的改变，并且页面和逻辑是分开的，比较适合在比较大的项目中使用。