学习
实践
活动
工具
TVP
写文章

flutter_bloc使用解析---骚年,你还在手搭bloc吗!

flutter_bloc使用将从下图的三个维度说明 [flutter_bloc] 前言 首先,有很多的文章在说flutter bloc模式的应用,但是百分之八九十的文章都是在说,使用StreamController +StreamBuilder搭建bloc,提升性能的会加上InheritedWidget,这些文章看了很多,真正写使用bloc作者开发的flutter_bloc却少之又少。 没办法,只能去bloc的github上去找使用方式,最后去bloc官网翻文档。 蛋痛,各位叼毛,就不能好好说说flutter_bloc的使用吗?非要各种抄bloc模式提出作者的那俩篇文章。 Bloc范例 效果 好了,哔哔了一堆,看下咱们要用flutter_bloc实现的效果。 [bloc演示] 直接开Chrome演示,大家在虚拟机上跑也一样。 Bloc 8.0+新写法 破坏式改变 bloc8.0+的版本,对比之前的写法简直是破坏式的改变,你如果升级到bloc 8.0及其以上的版本,之前写的bloc模式写法已经完全不兼容了,mapEventToState

1.3K41

flutter中使用BloC模式

image.png 什么是BloC模式? 在flutter中,实现BloC模式的精髓就是, 展示的数据从BloC中来,具体到了stream上,有了stream的到来,就可以使用StreamBuilder来构建ui了。 那么,你真的需要BloC模式吗? BloC模式,显然会是目前来看的最优模式。 2、必须要通过,final IncrementBloc bloc = BlocProvider.of<IncrementBloc>(context);获取bloc么?

15.4K82
  • 广告
    关闭

    年末·限时回馈

    热卖云产品年终特惠,2核2G轻量应用服务器6.58元/月起,更多上云必备产品助力您轻松上云

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Flutter 应用开发之Bloc模式

    所谓响应式编程,指的是一种面向数据流和变化传播的编程范式。使用响应式编程范式,意味着可以在编程语言中更加方便地表达静态或动态的数据流,而相关的计算模型会自动将变...

    28920

    Flutter Bloc 官方文档(BlocBuilder翻译)

    什么是Bloc,为什么用Flutter Bloc 就不介绍了,直入主题。 ? Bloc Widgets BlocBuilder BlocBuilder 是一个Flutter widget,它需要一个bloc和一个builder函数,BlocBuilder用响应 的新状态构建一个widget widget here based on BlocA's state } ) 如果你希望去提供一个特定的bloc,而不是通过BlocProvider和上下文查找决定。 那么可以这么写: BlocBuilder<BlocA, BlocAState>( bloc: blocA, // provide the local bloc instance builder: buildWhen获取bloc前一个状态和当前状态,并返回一个布尔值。如果buildWhen返回true,那么将使用state调用builder,widget将重新构建。

    70310

    Flutter响应式编程:Streams和BLoC

    BLoC模式 BLoC模式由来自Google的Paolo Soares和Cong Hui设计,并在2018年DartConf期间(2018年1月23日至24日)首次展示。 [image.png] Widgets通过Sinks向BLoC发送事件, BLoC通过Stream通知Widgets, 由BLoC实现的业务逻辑不是他们关注的问题。 只有一个限制...BLoC的可访问性 为了使所有这些工作,BLoC需要可以被访问到。 有几种方法可以访问它: 通过全局单例 这种方式可以实现,但不是真的推荐。 >(context); 可以使用多个BLoC吗? 为了在每个BLoC中强制执行dispose()方法,所有BLoC都必 须实现BlocBase接口。

    1.5K90

    【Flutter 专题】88 初识状态管理 Bloc (三)

    和尚刚学习了 FlutterBloc 的基本用法,使用的场景还很简单,主要是单一 Bloc 的应用,今天和尚继续尝试多个 Bloc 共用的场景; 和尚继续完善前两节的 Demo, 添加了随机变更背景色的功能(并没有实际意义,仅为了学习新知识点而已); FlutterBloc MultiBlocProvider 对于多个 Bloc 的应用场景,和尚尝试了如下三种方式: 方案一: 在 build() 外创建和初始化 Bloc;和尚认为这种方式一定程度上扩大了 Bloc 的作用域; NumberBloc _numBloc = NumberBloc(); ColorBloc MultiBlocListener 对于多个 Bloc 的场景,对于其 Bloc 的监听也可以有多种方式; 方案一: 对应于 BlocProvider 的方式,和尚合并前两种,尝试 小感想 和尚尝试了 Provider 和 Bloc 两种状态管理工具,均是对 Stream 的操作,和尚认为各有各的优势,不能互相替代; Bloc 方式最大的优势是把页面 UI 与业务逻辑拆分的更清晰

    49041

    Flutter 移动端架构实践:Widget-Async-Bloc-Service

    因此,在WABS中,我使用了一种名为 Async BLoC 的BLoC变体。 它和BLoC一样,我们有可以订阅的输出流;但是,BLoC输入可以包括 同步接收器、异步方法 甚至 共同的两者。 数据层/BLoC中的行为 1.BLoC应该是纯Dart的——没有UI代码,没有导入Flutter相关类和文件,也没有在BLoC中使用BuildContext。 3.控件和BLoC之间的接口应该和BLoC和Service之间的接口保证一致,也就是说,BloC可以通过同步/异步方法直接与服务类通信,并通过流通知更新。 服务层 Service类应该具有和BLoC相同的输入/输出接口。但是,Service和BLoC之间存在一个本质性的区别,那就是: BLoC可以持有和修改状态。 Service不能持有和修改状态。 ——虽然看起来Async-BLoC似乎对BLoC来说只是一个很小的改进,但它们完全不同。

    65220

    【Flutter 专题】87 初识状态管理 Bloc (二)

    可以更便利的实现 Bloc,主要是为了与 Bloc 共同使用而构建的;同样需要提前了解几个概念;和尚继续以上一节中的 Demo 进行扩展,添加了 Number 的递增和递减; BlocBuilder , }) 分析源码可知,builder 用于相应状态的 Widget,bloc 为当前提供的范围仅限于单个 Widget 且无法通过父级 BlocProvider 和当前级访问的 Bloc BlocProvider BlocProvider 为 Bloc 的供应者,创建 Bloc 并供应给其子控件树; BlocProvider({ Key key, @required Create 与 BlocBuilder 对应的 bloc 用法相同,如果省略了 bloc 参数,BlocListener 将使用 BlocProvider 和当前函数自动执行查找 BuildContext; condition of type … 和尚在刚开始尝试 BlocProvider.of(context) 方式获取 Bloc 时报如下错误; ?

    51531

    【Flutter 专题】86 初识状态管理 Bloc (一)

    Bloc 相关的内容; Bloc Bloc 可以方便的把样式与业务逻辑区分开,从而使开发更便捷,可重用性更好,测试也更加方便; ? 在使用 Bloc 之前需要提前了解一下如下几个概念; Event Event 事件作为 Bloc 的输入,一般是为了响应用户交互(例如按钮按下)或生命周期事件(例如页面加载)而添加它们。 作为将 Stream 输入的 Event 事件转换为输出的 States 状态;每个自定义的 Bloc 必须继承自基础的 Bloc;通过复写 initialState 和 mapEventToState ===$bloc====$event'); super.onEvent(bloc, event); } @override void onTransition(Bloc bloc, (bloc, transition); } @override void onError(Bloc bloc, Object error, StackTrace stackTrace) {

    46251

    Flutter 的状态管理方案:setState、BLoC、ValueNotifier、Provider

    BLoC 加载状态可以由 BLoC 中,stream 的值表示。 Provider<SignInBloc>( builder: (_) => SignInBloc(), dispose: (_, bloc) => bloc.dispose() , child: Consumer<SignInBloc>( builder: (_, bloc, __) => SignInPageBloc(bloc: bloc), 在 _signInAnonymously 方法中,通过调用 bloc.setIsLoading(value) 来更新 stream。 最后的比较 上述三种实现(setState、BLoC、ValueNotifier)非常相似,只是处理加载状态的方式不同。

    26200

    Flutter BLoC 异步通信、BlocBuilder的基本使用、BlocProvider的初探

    BLoC模式可以将Widget构建UI的代码与业务处理的代码分离出来,在BLoC模式下的应用程序,一般会有全局的BLoC,每一个页面也会对应有一个独立的BLoC。 [在这里插入图片描述] 使用BloC模式,Flutter项目应用里的所有组件都在一个事件流,其中一部分组件可以订阅事件,另一部分组件则消费事件 [在这里插入图片描述] *** 2 BloC 的基本使用 BloC是一种架构模式也是一种编程思想,在Flutter中使用BloC时,首先要引入bloc库 dependencies: flutter_bloc: ^6.0.6 然后将依赖库拉取到本地 flutter /flutter_bloc.dart'; import 'dart:async'; import 'bloc_time.dart'; ///Bloc 初探 class TestBlocTimePage 定义的 Bloc 角色,代码如下: import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:intl/intl.dart'; /

    1.2K11

    【源码篇】Flutter Bloc背后的思想,一篇纠结的文章

    用过Bloc的靓仔们,肯定能感受到,Bloc框架对开发页面,做了很清晰划分,框架强行定了俩种开发模式 Bloc模式:该模式划分四层结构 bloc:逻辑层 state:数据层 event:所有的交互事件 对了,说不定是Bloc作者,故意留了一个Provider刷新机制在Bloc中,把这个作为一个彩蛋! 突然感觉这点疙瘩没了! 这里就不重复写怎么使用了,使用明细可参照:flutter_bloc使用解析---骚年,你还在手搭bloc吗! (); _bloc = widget.bloc ?? 是抽象类 构造函数里面调用 _bindEventsToStates() 方法 Bloc抽象了一个mapEventToState(Event event)方法,继承Bloc抽象类,必须实现该方法 Bloc

    35241

    FlutterDojo设计之道—状态管理之路(三)

    BLoC模式下,Widget与Data彻底解耦: App的业务逻辑处理都在BLoC中 Widget通过Sink向BLoC发送数据 BLoC通过Stream通知Widget重建UI 这其实有点类似MVP 、MVC模式,BLoC模式将整个App分为三层,Data Layer、BLoC Layer、UI Layer,Data Layer和UI Layer都只能和BLoC Layer双向通信,但它们之间彼此隔离 下面将官方的counter demo,用BLoC模式重写下,让大家了解下创建BLoC模式的一般范式。 创建BLoC业务处理类 BLoC类是一个业务逻辑处理类,不包含任何UI逻辑,且一个BLoC类只处理一种独立的业务逻辑,在官方的Demo中,业务逻辑有下面几个部分构成。 来实现了BLoC业务处理类的管理。

    21330

    搭建企业级flutter开发框架(4)

    flutter_secure_storage等等 其他的可根据实际需求确定 Domain layer 推荐一些常用的:equatable meta json_serializable UI 最主要的是状态管理,推荐使用Bloc bloc hydrated_bloc bloc_test 下一步将生成一个具体的框架,放到github,欢迎关注

    8010

    【Flutter 状态管理】第一论: 对状态管理的看法与理解

    flutter_bloc 是实现状态管理的工具之一,它的核心是:通过 Bloc 将 Event 操作转化成 State;同时通过 BlocBuilder 监听状态的变化,进行局部组件构建。 通过这种方式,编程者可以将 状态变化逻辑 集中在 Bloc 中处理。当事件触发时,通过发送 Event 指令,让 Bloc 驱动 State 进行变化。 这样在任何界面中都可以获取该 Bloc 及对其状态进行共享。 这是个比较小的案例,可能无法体现 Bloc 的精髓,但作为一个入门级的体验还是挺不错的。你需要自己体会一下: [1]. 案例介绍:源码位置 为了让大家对 flutter_bloc 在逻辑分层上有更深的认识,这里选取了 flutter_bloc 官方的一个案例进行解读。 有人可能会问,业务逻辑都放在 Bloc 里处理不就行了吗,为什么非要搞个 repository 层。其实很任意理解,Bloc 核心是处理状态的变化,如果接口请求代码都放在 Bloc 里就显得非常臃肿。

    17920

    flutter weekly第9期

    medium.com/gitconnected/port-an-existing-c-c-app-to-flutter-with-dart-ffi-8dc401a69fd7 Flutter games with Bloc 本教程在flutter游戏开发中使用Bloc进行状态管理。 教程地址:https://verygood.ventures/blog/flutter-games-with-bloc-and-flame Flutter & GitHub Workflows: Deploying v=ZzQ_PWrFihg Flutter Bloc Tutorial For Beginners - Package. 该教程分享了在flutter中使用bloc的各种经验,非常适合初学者。

    6010

    主题色切换+国际化 三连

    本文会说一下provoder、BLoC和redux的三种实现主题色切换+国际化的实现方式,所以称三连击。 ? ---- 三、BLoC实现主题切换和国际化:flutter_bloc: ^0.22.1 如果是redux是中央集权,地方分权,那么BloC就是完全的自由民主。 一个BloC也有三大件:Bloc 业务逻辑单元、State状态、Events事件 ? ---- 1.主题色的BloC 状态类 可以根据自己的爱好写出自己的风格。下面是我比较喜欢的风格。 ThemeStateImpl(int colorIndex, ThemeData themeData) : super(colorIndex, themeData); } ---- 事件类 定义Bloc 如果Stream流理解地较好,BloC用起来可以感觉是非常优雅的。个人还是比较喜欢redux。Provider作为官宣,也挺好用的。如果hold得住,混用也是可以的。

    93220

    Flutter ——状态管理 | StreamBuild

    如 【 ScopedModel 】 【 Provide 】 【Bloc】 3.使用 StreamBuild 实现。 2.方法二使用状态管理bloc,如果使用了bloc,streamBuild中的stream 就因该传bloc< AModel >的数据,如果我其它地方使用也使用了这个item,那么这个stream就应该传 bloc< BMode >,此时streamBuild中的stream 类型就不匹配了,这个item 就无法复用了,所以我放弃使用bloc等状态管理 3.为何item 最外层使用StatefulWidget bloc+streamBuild,此时的stream是bloc里的,不需要在dispose()方法中去关流,这样就可以放弃使用StatefulWidget了。 6. bloc结合streamBuild 实现状态管理会在下一篇内容中讲解。

    32020

    Flutter 入门指北(Part 13)之网络

    以上代码查看 http_main.dart 文件 实践一下下 不知道小伙还记得前面讲的 BLoC 没有,忘了可以查看 Flutter 状态管理及 BLoC,这里结合 BLoC 和 Dio 实现界面和逻辑分离的小例子 实现 BLoC 需要有一个管理类 class UserBloc extends BaseBloc { RandomUserModel _user; RandomUserModel get user color: Colors.white, fontSize: 16.0))); @override Widget build(BuildContext context) { UserBloc _bloc = BlocProvider.of<UserBloc>(context); _bloc.updateUserInfo(); return Scaffold( // StreamBuilder , // 注入初始值 stream: _bloc.stream), // 注入更新 stream ); } } 以上代码查看 bloc_network 包下的所有文件 当然了,福利是不可少的,但是需要你到项目中自己去找

    25420

    我用flutter做了一个维基How中文版

    有了API了,接下来,就创建项目,码代码就是了,看看项目结构 image.png main.dart是工程的入口; bloc目录说明我这个项目是使用了bloc设计模式的,目录里放着各个业务逻辑的bloc ,所以,我的界面很清晰,没有任何请求逻辑,只根据数据展示ui,如果不了解,可以参考这个大佬的文章,介绍了bloc模式是什么,怎么用就用专业的库了,库后面会给出 cache目录是缓存工具类,因为我发现api widget这里是我封装的一些自定义组件,里面包括,在列表里面播放视频的控件等 所以,需要那些库呢,这里我贴一下 pull_to_refresh: ^1.5.8 flutter_bloc: ^ 0.10.8+1 chewie: ^0.9.8+1 neeko: ^0.0.6 其中 : debounce_throttle 是因为搜索的时候要输入关键字,控制调用接口的频率; flutter_bloc 就是一个对bloc设计模式封装得比较好用的库,我推荐使用这个; dio 是网络请求框架,支持restful,请求结果也直接给解析成json了。

    1.1K342

    扫码关注腾讯云开发者

    领取腾讯云代金券