红帽白皮书新鲜出炉!点击获取,让你的云战略更胜一筹! 了解详情
写点什么

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

  • 2020-12-15
  • 本文字数:3287 字

    阅读完需:约 11 分钟

如何使用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 类并覆盖 mapEventToStateinitialState 方法。


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 资讯和深度技术文章翻译分享给大家,已翻译出版《深入敏捷测试》、《持续交付实战》。


2020-12-15 17:172988

评论

发布
暂无评论
发现更多内容

数字化转型如何更方便?华为云大数据BI解决方案来了!

科技之光

启科量子部署工具 Runtime 正式开源

启科量子开发者官方号

部署 量子

我坦白→低代码功能我有,SQL练习题、数据可视化、数据填充助你高效

非喵鱼

sql 低代码 可视化 eCharts 数据库·

云原生、20.3k Star......时序数据库 TDengine 的 2022 年精彩纷呈

TDengine

数据库 tdengine 开源 时序数据库

华为云CDN提升网站响应速度,让下载快人一步

路过的憨憨

Dubbo 3 之 Triple 流控反压原理解析

Apache Dubbo

Java 开源 微服务 gRPC dubbo

公司刚来的阿里p8,看完我构建的springboot框架,甩给我一份文档

钟奕礼

程序员 Java 面试 Java、 java 编程

【华为云大数据BI】做好数据化管理,加快企业数字化转型的节奏

科技之光

2022,我们追逐群星,也在追逐AIGC的无尽可能

脑极体

这88道阿里高级岗面试题,刷掉了80%以上的Java程序员

钟奕礼

编程 程序员 Java 面试 Java、

华为云CDN,助力安全企业下载服务,更好提升用户体验

路过的憨憨

打造全链数据营销服务,华为云助力车企业务增值

科技之光

华为云大数据-助力数据价值化,释放企业发展潜能

科技之光

企业数字化转型难?华为云大数据BI帮你一站式上云

科技之光

【12.23-12.30】写作社区优秀技术博文回顾

InfoQ写作社区官方

热门活动

接口自动化测试不想写代码?这款工具强烈推荐

叶小柒

测试 Postman

建木v2.6.2发布

Jianmu

开源 DevOps 持续集成 低代码 CI/CD

Pg数据库日常维护操作指南

i查拉图斯特拉如是说

数据库 postgresql PgSQL

华为云CDN加速服务,引领企业数字化发展潮流!

路过的憨憨

既要速度与激情,也要稳定和安全,华为云CDN让你速度和安全兼得

路过的憨憨

存储无忧!华为云OBS为企业数据存储保驾护航

科技怪授

OBS

打破工业发展瓶颈,华为云赋能工业企业转型成效显著!

科技之光

墨菲安全软件供应链安全产品v3.0正式公测之产品特性简介及用户升级说明

墨菲安全

软件成分分析 开源安全 墨菲安全 软件供应链安全

AI for Science的上半场:人工智能如何重新定义科学研究新范式?

脑极体

蚂蚁金服Java研发岗二面:说说HashMap 中的容量与扩容实现

钟奕礼

程序员 Java 面试 Java、 java 编程

如何快速建立商业智能系统?华为云告诉您!

科技之光

暴雪、迪士尼大佬用什么画画?RayLink远控软件助力解锁远程创作

RayLink远程工具

远程控制软件 远程办公软件 远控软件 RayLink

「复享光学」用深度光谱技术推动光与电的变革

硬科技星球

刷完200+大厂Java真题手册,成功拿到阿里,京东,美团的offer

钟奕礼

程序员 Java 面试 Java、 java 编程

备受企业青睐的华为云CDN优势到底在哪?

路过的憨憨

10 万字节Spring Boot +redis详细面试笔记(带完整目录)免费分享

钟奕礼

程序员 Java 面试 Java、 java 编程

如何使用BLoC架构开发Flutter应用_大前端_Svetlana Cherednichenko_InfoQ精选文章