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());

              })

],

      ),

    );

  }

}

```  

运行结果如下图所示：