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 对象支持对数据流进行暂停、恢复和取消等操作。
2.1创建Stream
我们可以通过创建一个 async * (异步生成器) 方法在Dart中创建一个 Stream。
Stream<int> countStream(int max) async*{
for(int i=0;i<max;i++){
yield i;
}
}
通过将一个函数标记为 async *，我们可以使用 yield 作为关键字并返回 Stream 数据。在上面的示例中，我们返回的是一个不超过整数Int边界的整数Stream。
每次我们在 async * 函数中 yield 时，我们都会通过 Stream 推送该数据。
Cubit
Cubit 是 Stream 的一种特殊类型，用作 Bloc 类的基础。
cubit层应该可以看作是bloc层和event层部分结合的一种简写。
3.Bloc介绍
Bloc的模式示意图
使用BLoC方式进行状态管理时，应用里的所有组件被看成是一个事件流，一部分组件可以订阅事件，另一部分组件则消费事件。
实现详细方式为组件通过Sink向Bloc发送事件，BLoC接收到事件后执行内部逻辑处理，并把处理的结果通过流的方式通知给订阅事件流的组件。在BLoC的工作流程中，Sink接受事件输入，BLoC则对接受的内容进行处理，最后再以流的方式输出。
理解Bloc的运作原理要有几个重点关注对象，分别是事件、状态、转换和流。
- 事件（event）：在Bloc中，事件会通过Sink输入到Bloc中，通常是为了响应用户交互或者是生命周期事件而进行的操作。
- 状态 (state)：用于表示Bloc输出的东西，是应用状态的一部分。它可以通知UI组件，并根据当前状态重建其自身的某些部分。
- 转换 ：从一种状态到另一种状态的变动称之为转换，转换通常由当前状态、事件和下一个状态组成。
- 流：表示一系列非同步的数据，Bloc建立在流的基础之上。
BLoC Widget
1.BlocBuilder
BlocBuilder是flutter_bloc提供的一个基础组件，用于构建组件并响应组件新的状态，它通常需要Bloc和builder两个参数
```
BlocBuilder(
cubit:widget._counterBloc,
builder: (BuildContext context, CounterState currentState)
）
```
2.BlocProvider
BlocProvider是一个Flutter的组件（StatefulWidget），可以通过BlocProvider.of (context)向其子级提供bloc。它也可以作为依赖项注入到组件中，从而将一个bloc实例提供给子树中的多个组件使用。
```
CounterBloc bloc = BlocProvider.of(context);
```
4.利用Bloc完成计数器Demo
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' }
```
2.首先创建一个event事件
```
class PressAddEvent extends CounterEvent {
@override
StreamapplyAsync(
{CounterState currentState, CounterBloc bloc}) async* {
yield CounterIncreaceState(++currentState.num);
}
}
```
3.新建一个Bloc类，用于对计数器的状态进行管理
注意导入bloc类
```
class CounterBloc extends Bloc {
CounterBloc(CounterState state) :super(CounterIncreaceState(0));
@override
StreammapEventToState(CounterEvent event) async* {
yield* event.applyAsync(currentState:state, bloc:this);
}
```
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.使用Bloc之前，需要在应用的上层容器中进行注册。然后，再使用BlocProvider.of (context)获取注册的Bloc对象，通过Bloc处理业务逻辑。
```
void main() {
runApp(MyApp());
}
class MyAppextends StatelessWidget {
// This widget is the root of your application.
@override
Widgetbuild(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 Stringtitle;
@override
_MyHomePageStatecreateState() =>_MyHomePageState();
}
class _MyHomePageState extends State {
@override
Widgetbuild(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());
})
],
),
);
}
}
```
运行结果如下图所示：
