Flutter学习 - Bloc - 01 初识Bloc

本文主要介绍下Bloc以及使用Bloc开始一个简单demo

1. Bloc介绍

Bloc也是比较有名的状态管理框架，一个为 Dart 而生，可预测和管理状态的库，目前已经更新到了8.0.1 flutter_bloc

我们看下文档介绍

Bloc 是一个更高级的类，它依赖事件来触发状态的改变而不是函数。 Bloc 也扩展了 BlocBase ，这意味着它有着类似于 Cubit 的API。然而， Blocs 不是在 Bloc 上调用函数然后直接发出一个新的状态，而是接收事件并且将传入的事件转换为状态传出。

这个有点类似我们iOS中MMVM模式，通过ViewModel 输入input 事件 处理数据之后 输出output结果，从而达到UI和数据解耦的效果。

• Bloc是由以下包所组成:

  • bloc - bloc的核心库
  • flutter_bloc - 强大的Flutter Widgets可与bloc配合使用，以构建快速，反应灵活的移动端应用程序。
  • angular_bloc - 强大的Angular组件可与bloc配合使用，以构建快速的反应式Web应用程序。
  • hydrated_bloc - bloc状态管理包的一个扩展，它可以自动持久化和转储bloc状态。
  • replay_bloc - bloc状态管理包的一个扩展，增加了对撤销和恢复的支持。

• 为什么使用Bloc

Bloc可以比较轻松地将展示层的代码与业务逻辑分开，从而使您的代码快速，易于测试且可重复使用。基于 事件、状态 驱动的

Bloc试图通过调节何时可以发生状态更改并在整个应用程序中强制采用一种更改状态的方式来使状态更改可预测。

2. 快速开始一个计算器

pubspec.yaml导入，pub get。

dependencies
bloc: ^8.1.0
flutter_bloc: ^8.0.1

我们可以装点插件辅助我们快速生成代码快

前期还是手动敲下，熟悉情况。这里以简单的计数器为例，我们看下这个目录结构如下：

主要是page通过BlocProvider进行包裹，绑定UI和我们的数据处理类Cubit，之后在view中展示和刷新。这个结构就很类似我们的mmvm结构。

2.1 page

page页，类似我们iOS开发中的viewController，处理绑定的工作，或者简单页面可以直接在当前页面实现

class CounterPage extends StatelessWidget {
  const CounterPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => CounterCubit(),
      child: const CounterView(),
    );
  }
}

通过BlocProvider绑定CounterCubit和CounterView，从而可以让我们逻辑处理和页面展示分离，做到解耦效果。

2.2 Cubit

主要是用于逻辑处理，我们通过方法处理数据，指定数据类型，并初始化state数据为0，之后emit发出处理结果，UI做出响应刷新。

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);
  void add() => emit(state +1);
  void reduce() => emit(state -1);
}

我们可以把Cubit重的state拆分出去，仅仅做逻辑处理。

2.3 view

我们把 UI拆分出，当然也可以直接在page中实现

class CounterView extends StatelessWidget {

  const CounterView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('计数器'),),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BlocBuilder<CounterCubit,int>(
              builder: (context,state){
                return Text('$state');
              },
            ),
            ElevatedButton(onPressed: ()=> context.read<CounterCubit>().add(), child: const Text('增加')),
            ElevatedButton(onPressed: ()=> context.read<CounterCubit>().reduce(), child: const Text('减少'))
          ],
        ),
      ),
    );
  }
}

通过BlocBuilder获取CounterCubit中的state，在context中读取CounterCubit方法。

3. 小结

通过Bloc的学习，和demo的练习，了解架构的思想。后续继续学习了解下Stream和Cubit以及bloc。