携手创作，一起成长！这是我参加「日新计划 8 月更文挑战」的第15天，点击查看活动详情

本文首要介绍下Bloc以及运用Bloc开端一个简略demo

1. Bloc介绍

Bloc也是比较有名的状况办理结构，一个为 Dart 而生，可猜测和办理状况的库，现在已经更新到了8.0.1 flutter_bloc

Flutter学习 - Bloc - 01 初识Bloc

咱们看下文档介绍

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

Flutter学习 - Bloc - 01 初识Bloc

这个有点相似咱们iOS中MMVM模式，经过ViewModel 输入input 事情 处理数据之后 输出output结果，然后到达UI和数据解耦的效果。

Flutter学习 - Bloc - 01 初识Bloc

  • 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

咱们能够装点插件辅助咱们快速生成代码快

Flutter学习 - Bloc - 01 初识Bloc

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

Flutter学习 - Bloc - 01 初识Bloc

首要是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办法。

Flutter学习 - Bloc - 01 初识Bloc

3. 小结

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