如何使用 BLoC 架构开发 Flutter 应用

通过本文，你将了解什么是 Flutter 应用开发中的 BLoC 模式，它有什么好处，如何实现它，以及如何使用在真实的项目中使用它。

尽管 Flutter 还是一项相当年轻的技术，但它正在受到越来越多的欢迎。2015 年，它以 Sky 为名首次出现，2017 年，成为我们熟知和正在使用的 Flutter。Flutter 受到谷歌的支持，它允许开发人员创建感觉像本地那么漂亮而又经济的跨平台应用程序。

有许多架构，你都可以用来构建 Flutter 应用，比如：

• Vanilla

• InheritedWidget

• ChangeNotifier + Provider

• BLoC

• MobX

• Redux

这种开放的自由选择权可能有它的好处，但同时也可能导致命名不一致和类过于庞大的问题。在本文中，我所讨论的将是 BLoC 架构，它被许多程序员认为是 Flutter 开发的最佳选择之一。

什么是 BLoC 架构模式？

BLoC 代表业务逻辑组件，顾名思义，它是一种核心有独立组件的架构模式。BLoC 架构（将 BLoC 库集成到项目中即可使用它）是由 Felix Angelov 创建的，并于 2019 年在谷歌 I/O 中引入。

请注意，BLoC 是一种模式，其本身并不是架构。你仍然需要根据 DDD、MVVM 或 Clean 等架构来组织应用程序中的数据。

BLoC 有助于组织数据流，现在它是 Flutter 开发中最流行的模式。让我们来探究一下背后的原因。

BLoC 架构的好处

BLoC 架构有三大核心收益：

• 简单

• 可测试

• 强大

为什么会这样呢？BLoC 架构允许开发人员将应用程序的不同层分离——也就是表示层和业务逻辑层。这使得在代码的不同部分可以更容易地测试和重用元素。

BLoC 架构还有助于开发人员进行状态管理，因为他们能够随时了解应用程序的状态。它还使测试更容易，因为能够更方便地为代码的特定部分编写测试。

将表示与业务逻辑分离使开发人员不仅可以在应用程序内部重用元素，甚至可以在应用程序之间重用元素。BLoC 方法的另一个优点是几个团队成员可以在一个代码库上无缝协作。因为业务逻辑是独立的，所以开发人员更容易遵循相同的模式。

BLoC 架构的主要原则是用简单的模块创建复杂的产品。如果你的项目中有一名初级开发人员，那么 BLoC 架构会使他们更容易理解底层的工作原理。即使对于有经验的开发人员，BLoC 架构也能缩短熟悉项目所需的时间。如果你正在做时间紧迫的商业开发，那这一点尤为重要。

由于这种架构将应用程序的各个部分保持得较小且独立，因此你可以轻松测试应用程序的各个方面，并非常清楚需要修复哪些问题。

此外，BLoC 架构强制在整个应用程序中只使用一个方法更改状态，使应用程序的业务逻辑是可预测的、一致的。

现在，我们已经讨论了 BLoC 架构的优点，接下来谈谈它的逻辑。

BLoC 架构是如何工作的

在深入研究 BLoC 架构的逻辑之前，让我们先了解一下它的主要概念。

• 事件和操作 是用户与 UI 交互时的输入：例如，滑动或滚动。

• 状态 是对这些操作的反应，它们根据用户与接口交互所发起的事件而变化。

• BLoC 是负责业务逻辑的组件。它将事件转换为状态，并且是接收信息并随之作出响应的处理元素。

• 流 是用户界面 (UI) 和 BLoC 对作出反应的异步数据流。

BLoC 架构的逻辑为：当用户通过与 UI 交互执行操作时，此操作的相关信息将发送至 BLoC 组件。然后，BLoC 组件处理和解释这些信息，并通过更改 UI 组件的状态做出响应。

如何集成 BLoC 架构

首先，你需要遵照一种架构模式组织一个 Flutter 应用程序，如 DDD, MVVM，或者 Clean。而 BLoC 架构更像是一种进一步组织应用程序中的数据流的架构。

搭建好你的架构之后，需要将 BLoC 元素集成进来。

第一步：将 BLoC 架构添加到你的项目中

若要实现 BLoC 架构，你需要将 BLoC 库集成到你的项目中。为此，需要将 flutter_bloc: ^2.0.1 依赖项添加到 pubspec.yaml 文件中。恭喜！现在你有一个 Flutter 包了，你可以实现 BLoC 模式了。

第二步：在 BLoC 库中设置小部件

BLoC 库中有三个主要的小部件：

• Bloc

• BlocBuilder

• BlocProvider

你需要它们来创建 BLoCs，根据应用程序状态的变化构建 BLoCs，以及设置依赖关系。让我们看看如何实现每个小部件，并在应用程序的业务逻辑中使用它。

Bloc

Bloc 小部件是实现所有业务逻辑所需的基本组件。若要使用它，需要扩展 BLoC 类并覆盖 mapEventToState 和 initialState 方法。

在 mapEventToState 中，需要处理表示操作的参数。在此之后，需要将每个参数作为状态返回。参见以下示例：

Dartenum CounterEvent { increment, decrement } class CounterBloc extends Bloc { @override int get initialState => 0; @override Stream mapEventToState(CounterEvent event) async* { switch (event) { case CounterEvent.decrement: yield state - 1; break; case CounterEvent.increment: yield state + 1; break; } } }

如你所见，其中接获了 CounterEvent，并根据事件类型对其进行处理，然后返回状态 (本例是一个 int 数据)。

如果你想定制响应，可以创建一个抽象的状态或事件：

Dart//Customized state @immutable abstract class IncomingState {} class InitialIncomingState extends IncomingState {} class HandledState extends IncomingState { final int counter; HandledState(this.counter); }@immutable abstract class IncomingEvent {} class IncrementEvent extends IncomingEvent { IncrementEvent(); }class DecrementEvent extends IncomingEvent { DecrementEvent(); }

BlocBuilder

BlocBuilder 是一个通过构建 BLoCs 来响应新状态的小部件。这个小部件可以被多次调用，它的作用类似于一个通过创建小部件来响应状态变化，随后显示为新的 UI 元素的函数。

要获得一个不会通过 BlocProvider 和 BuildContext 访问的作为单个小部件的 BLoCs，你需要做如下指定：

DartBlocBuilder( bloc: blocA, // provide the local bloc instance builder: (context, state) { // return widget here based on the state of BlocA} )

如你所见，需要在 Bloc 参数中提供一个扩展的 Bloc 类。你的状态类实例将出现在 BlocBuilder 中。请记住，一开始的状态是之前在 initialState 方法中创建的状态。

为了避免内存泄漏，在创建 BlocBulider 类时不应该创建 Bloc 类的实例。否则，你将无法在 Bloc 类中关闭流。我的建议是在 initState 方法中创建一个 Bloc 实例，然后在 dispose 方法中使用 block.close() 关闭它。

BlocProvider

这个小部件作为依赖项注入进行工作，也就是说它可以一次为属于同一子树的几个小部件提供 BLoCs。BlocProvider 用于构建子树中所有小部件均可使用的 BLoCs。而且因为这些 BLoCs 是由 BlocProvider 构建的，所以它也能够关闭它们。

DartBlocProvider( builder: (BuildContext context) => BlocA(), child: ChildA(), );

注意，你还可以使用 BlocProvider 提供一个带有新小部件树的 BLoC 。你可以通过这种方式扩展现有 BLoC 的能力，而不是创建一个新的 BLoC 。但是，如果这样做，BlocProvider 无法关闭该 BLoC ，因为这不是它创建的。

第三步：创建一个事件

若要对数据执行任何操作（处理它、通过网络发送它、将它保存到数据库），则需要在你的 Bloc 组件中创建一个事件。为此，你只需要调用以下方法：

Dartbloc.add(YourEvent());

就这么简单！现在，BLoC 组件能够处理你的事件了。

如你所见，使用 BLoC 库搭建你的 BLoC 架构模式 非常容易。

结语

BLoC 模式是加强和组织你的 Flutter 应用的架构的最佳方式之一。它易于搭建和使用，并且使你的代码具有可预测性，且易于测试。

要在你的 Flutter 应用程序中实现 BLoC 模式，只需集成 BLoC 库，然后创建和设置必要的小部件，由这些小部件执行你的应用程序的业务逻辑和行为。最后，使用事件来操作应用程序中的数据，并将操作和结果连接起来。

我对任何 Flutter 项目都推荐 BLoC 架构，因为它使代码可维护，并帮助你摆脱样板和意大利面式的代码，使你应用程序的每个部分保持独立、便于组织。

原文链接：

https://dzone.com/articles/how-to-develop-your-flutter-app-with-the-bloc-arch

译者简介

冬雨，小小技术宅一枚，从事研发过程改进及质量改进方面的工作，关注编程、软件工程、敏捷、DevOps、云计算等领域，非常乐意将国外新鲜的 IT 资讯和深度技术文章翻译分享给大家，已翻译出版《深入敏捷测试》、《持续交付实战》。