flutter之bloc使用详解

flutter中一切皆为Widget,因此在我们开发中,往往业务和UI逻辑写在一起,这样不利于代码维护,因此状态管理框架久诞生了,这篇就开始讲一讲Bloc。

对于Bloc库有两个,如下图:
在这里插入图片描述flutter_bloc其实是对bloc的进一步封装,flutter_bloc引入了bloc库和provider库,是对bloc的进一步延伸。

bloc官方文档:https://bloclibrary.dev/#/zh-cn/coreconcepts

一.Bloc介绍

BLoC设计模式:BLoC模式的核心是Sink和Stream,它们用于处理输入和输出。通常,你会创建一个BLoC类,该类接收输入流并根据输入产生输出流。然后,UI组件订阅输出流以接收状态更新,并将用户操作发送到输入流。

Bloc有两种模式:

Bloc模式:该模式划分四层结构
在这里插入图片描述

bloc:逻辑层
state:数据层
event:所有的交互事件
view:页面

Cubit模式:该模式划分了三层结构

在这里插入图片描述

cubit:逻辑层
state:数据层
view:页面

Bloc模式和Cubit模式区别:

  • 复杂度: BLoC:BLoC通常用于管理更复杂的业务逻辑和状态。它可以处理多个事件和多个状态,适用于大型、复杂的应用程序。
    Cubit:Cubit的设计更简单,适用于处理较简单的状态和事件。它更适合于小型和中型应用程序,以及对状态管理模式不太熟悉的开发者。

  • 事件和状态管理: BLoC:在BLoC中,事件和状态是分开管理的,你需要自己编写事件和状态的类,并在BLoC中进行映射。这使得BLoC更加灵活,但也更加复杂。
    Cubit:Cubit将事件和状态合并到一个类中,称为Cubit类。这使得代码更加简洁,但在处理复杂的事件和状态时可能会变得混乱。

  • 异步支持: BLoC:BLoC天生支持异步操作,可以轻松处理异步任务,例如网络请求。这是因为BLoC的mapEventToState方法可以返回Stream。
    Cubit:Cubit也支持异步操作,但需要使用Emit函数来发射新的状态。

二.flutter_bloc简单使用

导入库:

flutter_bloc: ^8.1.3

这是一个插件,可选择使用,简化模版代码生成。安装flutter_bloc插件
在这里插入图片描述

使用案例:计数器

import 'package:flutter_bloc/flutter_bloc.dart';// 定义事件
enum CounterEvent { increment, decrement }class CounterBloc extends Bloc<CounterEvent, int> {CounterBloc() : super(0);Stream<int> mapEventToState(CounterEvent event) async* {switch (event) {case CounterEvent.increment:yield state + 1;break;case CounterEvent.decrement:yield state - 1;break;}}
}

在页面中使用 Bloc:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';class CounterPage extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Counter App'),),body: BlocProvider(create: (context) => CounterBloc(),child: CounterView(),),);}
}class CounterView extends StatelessWidget {Widget build(BuildContext context) {final counterBloc = BlocProvider.of<CounterBloc>(context);return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [BlocBuilder<CounterBloc, int>(builder: (context, count) {return Text('Count: $count', style: TextStyle(fontSize: 24));},),SizedBox(height: 16),Row(mainAxisAlignment: MainAxisAlignment.center,children: [FloatingActionButton(onPressed: () {counterBloc.add(CounterEvent.increment);},child: Icon(Icons.add),),SizedBox(width: 16),FloatingActionButton(onPressed: () {counterBloc.add(CounterEvent.decrement);},child: Icon(Icons.remove),),],),],),);}
}

三.各种小部件

BlocBuilder

BlocBuilder<BlocA, BlocAState>(builder: (context, state) {// return widget here based on BlocA's state}
)

BlocBuilder是一个 Flutter 小部件,需要一个bloc和 一个builder函数。BlocBuilder处理构建小部件以响应新状态。BlocBuilder与 非常相似,StreamBuilder但具有更简单的 API,以减少所需的样板代码量。该builder函数可能会被多次调用,并且应该是一个纯函数,它返回一个小部件以响应状态。

BlocSelector

BlocSelector<BlocA, BlocAState, SelectedState>(selector: (state) {// return selected state based on the provided state.},builder: (context, state) {// return widget here based on the selected state.},
)

BlocSelector是一个 Flutter 小部件,它类似于BlocBuilder但允许开发人员通过基于当前块状态选择新值来过滤更新。如果所选值不更改,则会阻止不必要的构建。所选值必须是不可变的,以便BlocSelector准确确定是否builder应该再次调用。

BlocListener

BlocListener<BlocA, BlocAState>(listener: (context, state) {// do stuff here based on BlocA's state},child: Container(),
)

BlocListener是一个 Flutter 小部件,它采用BlocWidgetListener和 一个可选参数bloc,并调用listener来响应块中的状态变化。它应该用于每次状态更改需要发生一次的功能,例如导航、显示 a SnackBar、显示 aDialog等…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/127430.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu连不上WiFi 或者虽然能连上校园网,但是浏览器打不开登录页面

写在前面 自己的电脑环境&#xff1a; Ubuntu20.04 一、问题描述 自己的 Ubuntu 遇到连接不上 除校园网之外的其他WiFi, 或者 虽然能连上校园网&#xff0c;但是浏览器打不开登录页面的问题。 二、解决方法 出现这种问题的原因可能是 之前开过VPN, 导致系统的网络设置出现…

CSS3网页布局基础

CSS布局始于第2个版本&#xff0c;CSS 2.1把布局分为3种模型&#xff1a;常规流、浮动、绝对定位。CSS 3推出更多布局方案&#xff1a;多列布局、弹性盒、模板层、网格定位、网格层、浮动盒等。本章重点介绍CSS 2.1标准的3种布局模型&#xff0c;它们获得所有浏览器的全面、一致…

回归预测 | Matlab实现POA-CNN-SVM鹈鹕算法优化卷积神经网络-支持向量机多变量回归预测

Matlab实现POA-CNN-SVM鹈鹕算法优化卷积神经网络-支持向量机多变量回归预测 目录 Matlab实现POA-CNN-SVM鹈鹕算法优化卷积神经网络-支持向量机多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.POS-CNN-SVM鹈鹕算法优化卷积神经网络-支持向量机的多变量回归…

将有序数组转换为二叉搜索树

做这一题的前提是要搞懂一些概念&#xff0c;比如什么是高度平衡的二叉树&#xff1f;什么又是搜索树&#xff1f; 二叉搜索树&#xff08;Binary Search Tree&#xff09; 它或者是一棵空树&#xff0c;或者是具有下列性质的二叉树&#xff1a; 若它的左子树不空&#xff0c;则…

CV计算机视觉每日开源代码Paper with code速览-2023.10.31

精华置顶 墙裂推荐&#xff01;小白如何1个月系统学习CV核心知识&#xff1a;链接 点击CV计算机视觉&#xff0c;关注更多CV干货 论文已打包&#xff0c;点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【基础网络架构】&#xff08;NeurIPS2023&#xff09;Fa…

EVM6678L 开发教程: IBL-TFTP 引导 elf 文件

目录 EVM6678L 开发教程: IBL-TFTP 引导 elf 文件安装 Tftpd64测试工程测试说明 EVM6678L 开发教程: IBL-TFTP 引导 elf 文件 参考: "C:\ti\mcsdk_2_01_02_06\tools\boot_loader\examples\i2c\tftp\docs\README.txt" 此教程介绍如何在 EVM6678L 开发板上实现 IBL-…

uni-starter 使用常见问题

1. Invalid uni-id config file 没有找到uni-id文件导致 需要在uniCloud-aliyun/cloudfunctions/common/uni-config-center/uni-id/下新建 config.json 如果没有uni-id 就新建一个。 注意&#xff1a;config.json是一个标准json文件&#xff0c;不支持注释 uni-starter 按照…

树形结构数据展示及返回上一级

11月1日&#xff0c;又是搬砖的一天&#xff0c;让我们红尘作伴&#xff0c;活的潇潇洒洒。。。。。。 html <template><view class"content"><view><input class"sreachTool" v-model"toolValue"/><van-icon name…

进口跨境电商商城源码(海关179接口+海关报关+三单对碰)

海关179接口 现如今&#xff0c;跨境电商正在飞速发展&#xff0c;进口商品成为人们消费的热点。然而&#xff0c;进口商品的报关手续繁琐&#xff0c;而海关179接口的出现解决了这个问题。海关179接口是指与海关电子数据交换的商业接口&#xff0c;可以实现与海关进行数据对接…

【生物信息学】单细胞RNA测序数据分析:计算亲和力矩阵(基于距离、皮尔逊相关系数)及绘制热图(Heatmap)

文章目录 一、实验介绍二、实验环境1. 配置虚拟环境2. 库版本介绍 三、实验内容0. 导入必要的库1. 读取数据集2. 质量控制&#xff08;可选&#xff09;3. 基于距离的亲和力矩阵4. 绘制基因表达的Heatmap5. 基于皮尔逊相关系数的亲和力矩阵6. 代码整合 一、实验介绍 计算亲和力…

【自然语言处理】【长文本处理】RMT:能处理长度超过一百万token的Transformer

相关博客 【自然语言处理】【长文本处理】RMT&#xff1a;能处理长度超过一百万token的Transformer 【自然语言处理】【大模型】MPT模型结构源码解析(单机版) 【自然语言处理】【大模型】ChatGLM-6B模型结构代码解析(单机版) 【自然语言处理】【大模型】BLOOM模型结构源码解析(…

【STL】:list用法详解

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关list的使用&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数据结构…

教您如何去除照片上的水印!

许多网友都在寻找方法去除照片上的水印&#xff0c;水印通常用于保护版权或标识来源&#xff0c;但有时候我们可能需要使用带有水印的照片&#xff0c;却又不希望水印影响观感&#xff0c;今天我将向大家介绍两种有效的方法&#xff0c;帮助解决“如何去除照片上的水印”这一难…

metaRTC集成flutter ui demo编译指南

概要 Flutter是由Google开发的开源UI工具包&#xff0c;用于构建跨平台应用程序&#xff0c;支持linux/windows/mac/android/ios等操作系统。 metaRTC新增flutter demo&#xff0c;支持linux/windows/mac/android/ios操作系统&#xff0c;此demo在ubuntu桌面环境下测试成功。…

【嵌入式项目应用】__UART自定义通信协议代码实现方法

目录 前言 一、什么是通信协议 二、简单通信协议的问题 三、通信协议的常见内容 1. 帧头 2. 设备地址/类型 3. 命令/指令 4. 命令类型/功能码 5. 数据长度 6. 数据 7.帧尾 8.校验码 四、通信协议代码实现 1. 消息数据发送 a. 通过串口直接发送每一个字节 b. 通过…

<windows>win11输入法无法设置UI,变为了win10样子,解决方法

1 问题 升级win11版本后&#xff0c;输入法可能会变为旧版&#xff0c;如下图。如何恢复WIN11新版样子&#xff1f; 2 解决 点击开始–>设置–>搜索”语言“–>选择中文简体右侧语言选项。 下拉到最后选择微软拼音右侧三点&#xff0c;选择键盘选项–>选择常规…

【C语言初阶】之函数

【C语言初阶】之函数 1. 函数是什么2. C语言中的函数2.1 库函数2.2.1 利用文档学习库函数 2.2 自定义函数 3. 函数参数3.1 实际参数(实参)3.2 形式参数(形参) 4. 函数调用4.1 传值调用4.2 传址调用4.3 练习 5. 函数的嵌套调用和链式访问5.1 嵌套调用5.2 链式访问 6. 函数的声明…

微服务架构之路1,服务如何拆分?使用微服务的注意事项?

目录 一、前言二、单体服务的弊端三、微服务化四、服务如何拆分&#xff1f;五、使用微服务的注意事项1、服务如何定义2、服务如何发布和订阅3、服务如何监控4、服务如何治理5、故障如何定位 大家好&#xff0c;我是哪吒。 一、前言 微服务已经是Java开发的必备技能&#xff…

Python画图之动态爱心

Python画出动态爱心&#xff08;有趣小游戏&#xff09; 一、效果图二、Python代码 一、效果图 二、Python代码 import random from math import sin, cos, pi, log from tkinter import *CANVAS_WIDTH 640 # 画布的宽 CANVAS_HEIGHT 480 # 画布的高 CANVAS_CENTER_X CANV…

线段树 区间赋值 + 区间加减 + 求区间最值

线段树好题&#xff1a;P1253 扶苏的问题 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 区间赋值 区间加减 求区间最大。 对于区间赋值和区间加减来说&#xff0c;需要两个懒标记&#xff0c;一个表示赋值cover&#xff0c;一个表示加减add。 区间赋值的优先级大于区间加…