如何使用 BLoC 架构开发您的 Flutter 应用程序

Flutter 每天都在变得越来越流行,尽管它是一项相当年轻的技术。它于 2015 年作为 Sky 首次出现,并在 2017 年成为我们所了解和使用的 Flutter。Flutter 由 Google 提供支持,它允许开发人员创建具有原生感觉的美观且具有成本效益的跨平台应用程序。 

您可以使用多种架构来构建 Flutter 应用程序: 
这种选择的自由是有益的,但它也可能导致不一致的命名和庞大的类。在本文中,我将讨论 BLoC 架构,它被许多程序员认为是 Flutter 开发的最佳选择之一。

什么是 BLoC 架构模式?
BLoC代表业务逻辑组件,顾名思义,它是一种以独立组件为核心的架构模式。BLoC 架构(您可以通过将 BLoC 库集成到您的项目中来使用)由 Felix Angelov 创建,并于 2019 年在 Google 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 架构
您首先需要根据 DDD、MVVM 或 Clean 等架构模式组织 Flutter 应用程序。BLoC 架构更像是一种模式,可以进一步组织应用程序中的数据流。 

设置架构后,您需要将 BLoC 元素集成到其中。 

第 1 步:将 BLoC 架构添加到您的项目中
要实现 BLoC 架构,您需要将 BLoC 库集成到您的项目中。为此,您需要将 flutter_bloc: ^2.0.1 依赖项添加到您的 pub spec.yaml 文件中。恭喜!现在你有了一个 Flutter 包,可以让你实现 BLoC 模式。 

步骤 2. 在 BLoC 库中设置小部件
BLoC 库中包含三个主要小部件: 

集团
区块生成器
区块提供者
您将需要它们来建立 BLoC,根据应用程序状态的变化构建这些 BLoC,并设置依赖项。让我们看看如何实现每个小部件并将其用于应用程序的业务逻辑。

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

在mapEventToState中,您需要处理表示操作的参数。完成后,您需要将每个参数作为状态返回。这是一个例子: 

如您所见,您在这里获取了CounterEvent并根据事件类型对其进行处理。然后返回状态(本例中 为int )。

如果你想自定义响应,你可以创建一个抽象状态或事件: 

区块生成器
BlocBuilder 是一个通过构建 BLoC 来响应新状态的小部件。这个小部件可以被多次调用,并且像一个函数一样通过创建小部件来响应状态的变化,然后显示为新的 UI 元素。 

要将 BLoC 作为无法通过 BlocProvider 和 BuildContext 访问的单个小部件获取,您需要像这样指定 bloc:


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

为避免内存泄漏,您不应在创建 BlocBulider 类时创建 Bloc 类的实例。如果这样做,您将无法关闭 Bloc 类中的流。我的建议是在initState方法中创建一个 Bloc 实例,并在dispose 方法中使用blocA.close()关闭它。 

区块提供者
这个小部件作为依赖注入工作,这意味着它可以同时为属于同一子树的多个小部件提供 BLoC。BlocProvider 用于构建块,然后可用于子树中的所有小部件。因为 BlocProvider 构建了区块,所以它也能够关闭它们。

请注意,您还可以使用 BlocProvider 为您已有的 bloc 提供新的小部件树。通过这种方式,您可以扩展现有集团的功能,而不是创建一个新集团。但是,在这种情况下,BlocProvider 不会关闭 bloc,因为它没有创建它。

猜你喜欢

转载自blog.csdn.net/wouderw/article/details/128089576