当前位置: 首页 > news >正文

Flutter鸿蒙next 使用 BLoC 模式进行状态管理详解

1. 引言

在 Flutter 中,随着应用规模的扩大,管理应用中的状态变得越来越复杂。为了处理这种复杂性,许多开发者选择使用不同的状态管理方案。其中,BLoC(Business Logic Component)模式作为一种流行的状态管理方法,因其将应用的业务逻辑与 UI 层分离而广泛应用。

本文将详细介绍如何在 Flutter 中使用 BLoC 模式进行状态管理,涵盖基本概念、实现步骤及代码示例,同时进行深入的代码解释,帮助开发者理解这一模式的精髓。

2. 什么是 BLoC 模式?

BLoC 是一种将业务逻辑从 UI 层分离的模式。它基于 Streams(流)和 Sinks(输入)的概念,将状态管理和 UI 更新通过流式的方式来实现。通过这种方式,UI 层通过监听数据流(Stream)来获取状态更新,避免了状态直接与 UI 层耦合,提高了代码的可维护性和可测试性。

核心组件:

  • Event:用户或系统触发的事件,代表一种动作或请求。
  • State:UI 显示的当前状态,通常是数据的一个集合。
  • Bloc:接收事件并转换为状态的核心业务逻辑组件。

Bloc 模式的核心原则就是 通过事件驱动状态的更新,并且 UI 层只关心状态的变化,而不关心事件的处理过程。

3. 使用 BLoC 的流程

使用 BLoC 模式的基本流程大致如下:

  1. 创建 Event 和 State 类:首先,定义一些 Event 和 State 类。
  2. 创建 Bloc 类:Bloc 类用于处理事件和状态之间的映射。
  3. 提供 Bloc:在 UI 中通过 BlocProvider 提供 Bloc 实例,确保其生命周期的管理。
  4. 通过 BlocBuilder 或 BlocListener 更新 UI:UI 通过监听状态变化来更新界面。

4. 代码示例

接下来,创建一个简单的计数器应用,通过 BLoC 模式管理计数器的增减操作。

代码结构:

  • CounterEvent:定义可能的用户操作事件。
  • CounterState:定义计数器的状态。
  • CounterBloc:处理事件并输出状态。

代码实现:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';// 1. 定义 Event
abstract class CounterEvent {}class IncrementEvent extends CounterEvent {}class DecrementEvent extends CounterEvent {}// 2. 定义 State
class CounterState {final int counter;CounterState({required this.counter});
}// 3. 定义 Bloc
class CounterBloc extends Bloc<CounterEvent, CounterState> {CounterBloc() : super(CounterState(counter: 0));@overrideStream<CounterState> mapEventToState(CounterEvent event) async* {if (event is IncrementEvent) {yield CounterState(counter: state.counter + 1);} else if (event is DecrementEvent) {yield CounterState(counter: state.counter - 1);}}
}// 4. 主程序界面
void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: BlocProvider(create: (context) => CounterBloc(),child: CounterPage(),),);}
}class CounterPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('BLoC Counter')),body: Center(child: BlocBuilder<CounterBloc, CounterState>(builder: (context, state) {return Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('Counter Value: ${state.counter}', style: TextStyle(fontSize: 30)),Row(mainAxisAlignment: MainAxisAlignment.center,children: [ElevatedButton(onPressed: () => context.read<CounterBloc>().add(IncrementEvent()),child: Text('Increment'),),SizedBox(width: 10),ElevatedButton(onPressed: () => context.read<CounterBloc>().add(DecrementEvent()),child: Text('Decrement'),),],)],);},),),);}
}

5. 代码详细解释

1. 定义 Event 类

abstract class CounterEvent {}
class IncrementEvent extends CounterEvent {}
class DecrementEvent extends CounterEvent {}

CounterEvent 是一个抽象类,所有事件类型都继承自该类。我们定义了两个具体的事件:IncrementEventDecrementEvent,分别表示计数器增加和减少。

2. 定义 State 类

class CounterState {final int counter;CounterState({required this.counter});
}

CounterState 用于表示计数器的状态,包含一个名为 counter 的整数变量,表示当前计数值。State 负责存储应用的状态,它是 BLoC 模式的核心。

3. 定义 Bloc 类

class CounterBloc extends Bloc<CounterEvent, CounterState> {CounterBloc() : super(CounterState(counter: 0));@overrideStream<CounterState> mapEventToState(CounterEvent event) async* {if (event is IncrementEvent) {yield CounterState(counter: state.counter + 1);} else if (event is DecrementEvent) {yield CounterState(counter: state.counter - 1);}}
}

CounterBloc 是处理业务逻辑的核心部分,继承自 Bloc<CounterEvent, CounterState>。在构造函数中,我们初始化了计数器状态为 0。mapEventToState 方法用于处理事件并将状态转换为新的状态。例如,当接收到 IncrementEvent 时,计数器的值加 1,并通过 yield 关键字返回一个新的 CounterState

4. 提供 Bloc 并更新 UI

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: BlocProvider(create: (context) => CounterBloc(),child: CounterPage(),),);}
}

BlocProvider 用于提供 CounterBloc 实例,确保它在 widget 树中是可访问的。在这里,我们将 CounterBloc 提供给 CounterPage 进行状态管理。

BlocBuilder<CounterBloc, CounterState>(builder: (context, state) {return Column(children: [Text('Counter Value: ${state.counter}'),Row(children: [ElevatedButton(onPressed: () => context.read<CounterBloc>().add(IncrementEvent()),child: Text('Increment'),),ElevatedButton(onPressed: () => context.read<CounterBloc>().add(DecrementEvent()),child: Text('Decrement'),),],),],);},
)

BlocBuilder 监听 CounterBloc 输出的 CounterState,并根据 state 更新 UI。点击按钮时,通过 context.read<CounterBloc>().add() 来触发相应的事件,从而更新计数器的状态。

6. 总结

通过 BLoC 模式,我们成功将业务逻辑从 UI 层分离,使得应用的状态管理更加清晰、可维护。BLoC 模式的核心思想是通过事件驱动状态的变化,UI 只需要关注状态的变化,而不需要直接操作状态或事件,降低了组件之间的耦合性。

这种模式特别适合于需要管理大量复杂状态的应用,例如社交媒体、新闻应用等,通过合理的事件与状态划分,可以实现高效的 UI 更新和良好的代码结构。

相关文章:

Flutter鸿蒙next 使用 BLoC 模式进行状态管理详解

1. 引言 在 Flutter 中&#xff0c;随着应用规模的扩大&#xff0c;管理应用中的状态变得越来越复杂。为了处理这种复杂性&#xff0c;许多开发者选择使用不同的状态管理方案。其中&#xff0c;BLoC&#xff08;Business Logic Component&#xff09;模式作为一种流行的状态管…...

Gen-RecSys——一个通过生成和大规模语言模型发展起来的推荐系统

概述 生成模型的进步对推荐系统的发展产生了重大影响。传统的推荐系统是 “狭隘的专家”&#xff0c;只能捕捉特定领域内的用户偏好和项目特征&#xff0c;而现在生成模型增强了这些系统的功能&#xff0c;据报道&#xff0c;其性能优于传统方法。这些模型为推荐的概念和实施带…...

Android 重新定义一个广播修改系统时间,避免系统时间混乱

有时候&#xff0c;搞不懂为什么手机设备无法准确定义系统时间&#xff0c;出现混乱或显示与实际不符&#xff0c;需要重置或重新设定一次才行&#xff0c;也是真的够无语的&#xff01;&#xff01; vendor/mediatek/proprietary/packages/apps/MtkSettings/AndroidManifest.…...

第3章:角色扮演提示-Claude应用开发教程

更多教程&#xff0c;请访问claude应用开发教程 设置 运行以下设置单元以加载您的 API 密钥并建立 get_completion 辅助函数。 !pip install anthropic# Import pythons built-in regular expression library import re import anthropic# Retrieve the API_KEY & MODEL…...

【FAQ】HarmonyOS SDK 闭源开放能力 —Vision Kit

1.问题描述&#xff1a; 人脸活体检测页面会有声音提示&#xff0c;如何控制声音开关&#xff1f; 解决方案&#xff1a; 活体检测暂无声音控制开关&#xff0c;但可通过其他能力控制系统音量&#xff0c;从而控制音量。 活体检测页面固定音频流设置的是8&#xff08;无障碍…...

【问题解决】Tomcat由低于8版本升级到高版本使用Tomcat自带连接池报错无法找到表空间的问题

问题复现 项目上历史项目为解决漏洞扫描从Tomcat 6.0升级到了9.0版本&#xff0c;服务启动的日志显示如下警告&#xff0c;数据源是通过JNDI方式在server.xml中配置的&#xff0c;控制台上狂刷无法找到表空间的错误&#xff08;没截图&#xff09; 报错&#xff1a; 06-Nov-…...

Git LFS

Git LFS&#xff08;Git Large File Storage&#xff09;是一个用于管理和版本控制大文件的工具&#xff0c;它扩展了 Git 的功能&#xff0c;帮助处理大文件或二进制文件的存储和管理问题。 为什么需要 Git LFS&#xff1f; Git 默认是针对文本文件进行优化的&#xff0c;尤…...

基于Redis缓存机制实现高并发接口调试

创建接口 这里使用的是阿里云提供的接口服务直接做的测试&#xff0c;接口地址 curl http://localhost:8080/initData?tokenAppWithRedis 这里主要通过参数cacheFirstfalse和true来区分是否走缓存&#xff0c;正常的业务机制可能是通过后台代码逻辑自行控制的&#xff0c;这…...

数字化转型实践:金蝶云星空与钉钉集成提升企业运营效率

数字化转型实践&#xff1a;金蝶云星空与钉钉集成提升企业运营效率 本文介绍了深圳一家电子设备制造企业在数字化转型过程中&#xff0c;如何通过金蝶云星空与钉钉的高效集成应对挑战、实施解决方案&#xff0c;并取得显著成果。集成项目在提高沟通效率、自动化审批流程和监控异…...

Flutter 鸿蒙next 中使用 MobX 进行状态管理

Flutter & 鸿蒙next 中使用 MobX 进行状态管理 在应用开发中&#xff0c;状态管理是一个至关重要的环节&#xff0c;特别是在复杂的Flutter或鸿蒙next项目中。状态的变化往往会影响UI的更新&#xff0c;因此&#xff0c;选择一种高效、灵活的状态管理工具显得尤为重要。Mo…...

1.62亿元!812个项目立项!上海市2024年度“科技创新行动计划”自然科学基金项目立项

本期精选SCI&EI ●IEEE 1区TOP 计算机类&#xff08;含CCF&#xff09;&#xff1b; ●EI快刊&#xff1a;最快1周录用&#xff01; 知网(CNKI)、谷歌学术期刊 ●7天录用-检索&#xff08;100%录用&#xff09;&#xff0c;1周上线&#xff1b; 免费稿件评估 免费匹配期…...

Redis数据库测试和缓存穿透、雪崩、击穿

Redis数据库测试实验 实验要求 1.新建一张user表&#xff0c;在表内插入10000条数据。 2.①通过jdbc查询这10000条数据&#xff0c;记录查询时间。 ②通过redis查询这10000条数据&#xff0c;记录查询时间。 3.①再次查询这一万条数据&#xff0c;要求根据年龄进行排序&#…...

[vulnhub] DarkHole: 2

https://www.vulnhub.com/entry/darkhole-2,740/ 端口扫描主机发现 探测存活主机&#xff0c;185是靶机 # nmap -sP 192.168.75.0/24 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-11-08 18:02 CST Nmap scan report for 192.168.75.1 Host is up (0.…...

《XGBoost算法的原理推导》12-2 t轮迭代中对样本i的预测值 公式解析

本文是将文章《XGBoost算法的原理推导》中的公式单独拿出来做一个详细的解析&#xff0c;便于初学者更好的理解。 好的&#xff0c;公式(12-2)表示的是 XGBoost 在第 t t t 轮迭代中对样本 i i i 的预测值。它说明了在第 t t t 轮迭代中&#xff0c;模型的预测是通过累加之前…...

./bin/mindieservice_daemon启动成功

接MindIE大模型测试及报错Fatal Python error: PyThreadState_Get: the function must be called with the GIL held,-CSDN博客经过调整如下红色部分参数&#xff0c;昇腾310P3跑起来了7b模型&#xff1a; rootdev-8242526b-01f2-4a54-b89d-f6d9c57c692d-qjhpf:/home/apulis-de…...

Linux: network: ip link M-DOWN的具体含义是什么?

文章目录 参考简介实例代码解释openstack上的显示如果是在一个interface上建立了vlan参考 https://unix.stackexchange.com/questions/348327/using-ip-what-does-m-down-mean www.policyrouting.org/iproute2.doc.html#ss9.1 简介 是指上一级的接口的状态。 实例 4: ersp…...

Spring中的过滤器和拦截器

Spring中的过滤器和拦截器 一、引言 在Spring框架中&#xff0c;过滤器&#xff08;Filter&#xff09;和拦截器&#xff08;Interceptor&#xff09;是实现请求处理的两种重要机制。它们都基于AOP&#xff08;面向切面编程&#xff09;思想&#xff0c;用于在请求的生命周期…...

leetcode20.括号匹配

题目描述 给定一个只包括 ‘(’&#xff0c;‘)’&#xff0c;‘{’&#xff0c;‘}’&#xff0c;‘[’&#xff0c;‘]’ 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 每个…...

Unity性能优化-具体操作

批量渲染是通过减少CPU向GPU发送渲染命令&#xff08;DrawCall&#xff09;的次数&#xff0c;以及减少GPU切换渲染状态的次数&#xff0c;尽量让GPU一次多做一些事情&#xff0c;来提升逻辑线和渲染线的整体效率。 Draw Call性能消耗原因是命令从Runtime到Driver的过程中&…...

【嵌入式开发——ARM】1ARM架构

嵌入式领域&#xff0c;使用ARM架构的芯片公司可不占少数吧&#xff0c;intel的x86架构主要占据PC、服务器市场&#xff0c;ARM架构主要占据移动市场。x86架构和ARM架构不同的主要原因&#xff0c;是背后使用的计算机指令集不同。计算机有自己的语言系统&#xff08;汇编&#…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

适应性Java用于现代 API:REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

基于单片机的宠物屋智能系统设计与实现(论文+源码)

本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢&#xff0c;连接红外测温传感器&#xff0c;可实时精准捕捉宠物体温变化&#xff0c;以便及时发现健康异常&#xff1b;水位检测传感器时刻监测饮用水余量&#xff0c;防止宠物…...

网页端 js 读取发票里的二维码信息(图片和PDF格式)

起因 为了实现在报销流程中&#xff0c;发票不能重用的限制&#xff0c;发票上传后&#xff0c;希望能读出发票号&#xff0c;并记录发票号已用&#xff0c;下次不再可用于报销。 基于上面的需求&#xff0c;研究了OCR 的方式和读PDF的方式&#xff0c;实际是可行的&#xff…...

Appium下载安装配置保姆教程(图文详解)

目录 一、Appium软件介绍 1.特点 2.工作原理 3.应用场景 二、环境准备 安装 Node.js 安装 Appium 安装 JDK 安装 Android SDK 安装Python及依赖包 三、安装教程 1.Node.js安装 1.1.下载Node 1.2.安装程序 1.3.配置npm仓储和缓存 1.4. 配置环境 1.5.测试Node.j…...