首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当未显式设置bloc时,为什么从不调用BlocBuilder

当未显式设置bloc时,从不调用BlocBuilder的原因是BlocBuilder是基于流的构建器,它会订阅一个bloc并根据bloc的状态自动重建。在未显式设置bloc的情况下,BlocBuilder无法订阅任何bloc,并且不会有任何bloc状态的变化,因此不会被调用。

Bloc是一种状态管理的模式,用于在应用程序中管理状态并将业务逻辑与UI分离。它由三个核心组件组成:事件(Event)、状态(State)和处理器(Bloc)。

在使用Bloc模式时,需要显式地创建和配置bloc,并将其与BlocBuilder关联起来。BlocBuilder会监听bloc的状态变化,并在状态变化时自动重建UI。

以下是使用BlocBuilder的步骤:

  1. 创建一个bloc类,该类应继承自Bloc,并定义事件和状态。
  2. 在需要使用bloc的地方,实例化该bloc,并将其与BlocBuilder关联起来。
  3. 在BlocBuilder的builder回调函数中,根据bloc的状态构建UI。

例如,假设我们有一个计数器应用程序,需要使用Bloc模式管理计数器的状态。以下是使用BlocBuilder的示例代码:

代码语言:txt
复制
// 引入所需的包
import 'package:flutter_bloc/flutter_bloc.dart';

// 事件类
abstract class CounterEvent {}

class IncrementEvent extends CounterEvent {}

class DecrementEvent extends CounterEvent {}

// 状态类
abstract class CounterState {}

class InitialState extends CounterState {}

class UpdatedState extends CounterState {
  final int count;

  UpdatedState(this.count);
}

// Bloc类
class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(InitialState());

  @override
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    if (event is IncrementEvent) {
      yield UpdatedState(state.count + 1);
    } else if (event is DecrementEvent) {
      yield UpdatedState(state.count - 1);
    }
  }
}

// 应用程序入口
void main() {
  runApp(MyApp());
}

// UI组件
class MyApp extends StatelessWidget {
  final CounterBloc counterBloc = CounterBloc();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Counter App'),
        ),
        body: BlocBuilder<CounterBloc, CounterState>(
          bloc: counterBloc,
          builder: (context, state) {
            if (state is UpdatedState) {
              return Center(
                child: Text(
                  'Count: ${state.count}',
                  style: TextStyle(fontSize: 24),
                ),
              );
            }
            return Container();
          },
        ),
        floatingActionButton: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            FloatingActionButton(
              onPressed: () => counterBloc.add(IncrementEvent()),
              child: Icon(Icons.add),
            ),
            SizedBox(height: 8),
            FloatingActionButton(
              onPressed: () => counterBloc.add(DecrementEvent()),
              child: Icon(Icons.remove),
            ),
          ],
        ),
      ),
    );
  }
}

在上述示例代码中,我们创建了一个CounterBloc来管理计数器的状态。在UI部分,我们使用BlocBuilder将CounterBloc与UI组件关联起来。在BlocBuilder的builder回调函数中,我们根据CounterBloc的状态构建UI。当触发增加或减少计数器的事件时,CounterBloc会发出对应的状态变化,BlocBuilder会相应地重建UI。

这里推荐使用的腾讯云相关产品是腾讯云云函数SCF(Serverless Cloud Function)。SCF是腾讯云提供的无服务器计算服务,可以帮助开发者更轻松地构建和管理应用程序的后端逻辑。使用SCF可以将计算资源的管理交给云平台,减少运维成本,同时具备弹性扩缩容能力,根据实际负载自动调整资源。您可以通过腾讯云云函数SCF官方文档了解更多详情和使用方法:腾讯云云函数SCF官方文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

Bloc 8.0+新写法 破坏改变 bloc8.0+的版本,对比之前的写法简直是破坏的改变,你如果升级到bloc 8.0及其以上的版本,之前写的bloc模式写法已经完全不兼容了,mapEventToState...,使用BlocProvider.of(context)调用全局XxxBloc中事件,这就起到了一种跨页面调用事件的效果 使用全局Bloc做跨页面事件,应该明白,当你关闭Bloc对应的页面...state } ) 仅您希望提供一个范围仅限于单个窗口小部件且无法通过父级BlocProvider和当前类访问的bloc,才指定该bloc BuildContext。...,这意味着create通过查找块将执行该bloc BlocProvider.of(context)。...需要将现有bloc用于新路线,这将是最常用的。在这种情况下,BlocProvider由于不会创建bloc,因此不会自动关闭该bloc

5.4K41

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

可以更便利的实现 Bloc,主要是为了与 Bloc 共同使用而构建的;同样需要提前了解几个概念;和尚继续以上一节中的 Demo 进行扩展,添加了 Number 的递增和递减; BlocBuilder...与 BlocBuilder 对应的 bloc 用法相同,如果省略了 bloc 参数,BlocListener 将使用 BlocProvider 和当前函数自动执行查找 BuildContext; condition...为可选的过度细粒度,包括两个参数,之前的状态和当前的状态,返回值为 Boolean 类型,true 为进行 listener 的监听,false 过滤掉 listener 的监听;此时的过滤与 BlocBuilder...Number > 20 ,BlocListener 过滤 listener 监听,与 BlocBuilder 中过滤的状态无关', style: TextStyle(fontSize: 20.0, color...A2: 在 build() 外创建或通过如下方式创建,并建议与 BlocBuilder 成对设置 // build() 方法外创建 NumberBloc _numBloc; @override void

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

    BLoC 异步通信、BlocBuilder的基本使用、BlocProvider的初探 *** 1 前言 BloC 全称是 Business Logic Component(业务逻辑组件),主要作用就是将业务逻辑和...BloC是一种架构模式也是一种编程思想,在Flutter中使用BloC,首先要引入bloc库 dependencies: flutter_bloc: ^6.0.6 然后将依赖库拉取到本地 flutter...packages get 在Flutter BloC模式开发中常用组件有BlocBuilder、BlocProvider、BlocListener和BlocConsumer等等。...home: TestBlocTimePage(), ), ); } } [在这里插入图片描述] 对于 TestBlocTimePage 就是 MaterialApp中设置默认显示的...buildWhen参数,用于向BlocBuilder提供可选的条件,返回 true,那么将调用state执行视图的重新构建,如果返回false,则不会执行视图的重建操作。

    3.3K11

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

    那点击为什么状态会发生变化呢?...flutter_bloc 是实现状态管理的工具之一,它的核心是:通过 Bloc 将 Event 操作转化成 State;同时通过 BlocBuilder 监听状态的变化,进行局部组件构建。... event == CountEvent.add ,会产出一个原状态 +1 的新 CountState 对象。...注: debounce : 调用动作 n 毫秒后,才会执行该动作,若在这 n 毫秒内又调用此动作则将重新计算执行时间。...有人可能会问,业务逻辑都放在 Bloc 里处理不就行了吗,为什么非要搞个 repository 层。其实很任意理解,Bloc 核心是处理状态的变化,如果接口请求代码都放在 Bloc 里就显得非常臃肿。

    1.5K20

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

    Bloc框架做了一些让我非常疑惑的操作,_startListening方法中的回调中调用了 e.markNeedsNotifyDependents() ,完全没用!...下面就直接写出调整后写法了 插件 因为官方插件生成的写法,和调整后写法差距有点大,而且官方插件不支持生成view层和相关设置,此处我就撸了一个插件,完善了相关功能 请注意,Wrap代码和提示代码片段,参靠了官方插件规则...可以发现Bloc是通过 StreamController 和 listen配合实现刷新的 调用的 widget.listener(context, state),这个实现的方法是个setState,大家可以看看...是抽象类 构造函数里面调用 _bindEventsToStates() 方法 Bloc抽象了一个mapEventToState(Event event)方法,继承Bloc抽象类,必须实现该方法 Bloc...类中,实例了Stream流对象,来做Event的事件触发机制 添加Event事件,会触发 _bindEventsToStates() 方法中的listener回调 _bindEventsToStates

    2.4K41

    一天搞定:Flutter + ChatGPT,打造智能聊天机器人

    优秀的全局数据管理方式 flutter_bloc,完美的业务逻辑和界面UI代码分层隔离。flutter_bloc_test,bloc也可以mock测试,完全脱离界面耦合。...controller: _scrollController, thumbVisibility: true, child: BlocBuilder...API,这和我们平常调用API 接口的方式有点不一样,平常是一次调用一次返回,而流式调用是一次调用多次返回,因此我们可以使用dart 的 stream API 来处理5、但是更好的方式是,使用flutter_bloc...多语言和主题设置的支持Flutter提供了国际化和主题管理API,我们可以将应用所需的各种语言和主题资源文件集中存放,并在应用启动根据用户选择的语言和主题载入相关资源文件,这部分我使用flutter_bloc...实现,有个好处,这个库有个hydrated_bloc 插件,可以支持我非常方便的缓存本地设置

    5.7K71

    【Flutter&Flame 游戏 - 贰陆】pinball 源码分析 - 游戏主页

    加载完成之后,就会进入到如下的主菜单界面,有个大大的 Play 按钮。 可以看到此时两个吉祥物是在运动的,而且背景中也会显示排行榜的信息。...如下所示:资源加载完毕,会显示 PinballGameLoadedView 组件: ---- 通过源码可以看出 PinballGameLoadedView 主要有 3 个部分,通过 Stack 进行叠放...---- 另外可以 注意到,这里使用了两个 Bloc 中的数据: StartGameBloc 和 GameBloc 来获取当前游戏状态。...另外通过 BlocBuilder 中的构建逻辑可以看出,只有当游戏状态是 isGameOver ,才会显示。...那本文就到这里,明天见 ~ @张风捷特烈 2022.06.22 允禁转 我的 公众号: 编程之王 我的 掘金主页 : 张风捷特烈 我的 B站主页 : 张风捷特烈 我的 github 主页 : toly1994328

    78620

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

    控件可以是无状态或有状态的,但它们都不应包含任何  状态管理的逻辑。  状态管理的示例是 Flutter 计数器,增量按钮被按下,程序通过 setState() 对计数器进行值的递增。...2.返回一个Future的结果,调用的代码可以等待结果并相应地执行某些操作。 3.抛出一个异常,调用的代码可以通过try/catch捕获它,并在需要展示一个警告。...以下是我用Flutter和Firebase实现的身份验证流程的示例: [image] 观察到的结果: 触发了登录事件,我们禁用了所有按钮并显示CircularProgressIndicator,我们将加载状态设置为...登录成功或失败后,我们重新启用所有按钮并恢复标题的内容,我们通过设置loading=false达到该效果。 登录失败,我们会弹出一个警示的对话框。...更新app本地的状态(例如,将状态从一个控件传递到另一个控件中)BLoC有更简单的替代方案,这个后文再提。

    16.1K20

    掌握Flutter底部导航栏:畅游导航之旅

    通过设置_bottomNavigationBarState类中的_onItemTapped函数,可以实现底部导航栏与页面的切换效果,并利用PageView的onPageChanged回调函数实现页面切换的同步更新...通过创建一个NavigationBloc来处理底部导航栏的状态,并在需要Bloc发送事件来更新状态,可以实现底部导航栏的状态管理。...然后,我们使用BlocProvider将NavigationBloc提供给底部导航栏和相关页面组件,并使用BlocBuilder在这些组件中监听和更新状态。...如果用户已登录,则显示“Home”和“Search”导航项;如果用户登录,则显示“Login”导航项。...7.3 实现底部导航栏的动画效果 为了提升用户体验,有时候我们还可以为底部导航栏添加一些动画效果,例如切换导航项的渐变动画、滑动导航栏的缩放动画等。

    36110

    Flutter响应编程:Streams和BLoC

    本文主要介绍Streams,Bloc和Reactive Programming(响应编程)的概念。 理论和实践范例。...下面的动画展示了该程序: [image.png] 您进入此页面以获取有关Reactive Programming,BLoC和Streams的信息,我将首先介绍它们。...您将某物插入管道,它会在管道内流动并从另一端流出。...很明显,所有这些意味着,通过响应应编程,应用程序将会: 变得异步, 围绕Streams和listeners的概念进行架构, 某些事情发生在某个地方(事件,变量的变化......),会向Stream...不同BLoCs / Streams的编排 下图显示了如何使用主要3个BLoC: 在BLoC的左侧,哪些组件调用Sink 在右侧,哪些组件监听流 例如,MovieDetailsWidget调用inAddFavorite

    4.2K90

    Flutter GetX使用---简洁的魅力!

    数据源变化时,将自动执行刷新组件的方法 logic层 这里变量数值后写.obs操作,是说明定义了该变量为响应变量,该变量数值变化时,页面的刷新方法将自动刷新 基础类型,List,类都可以加.obs...,才会会执行刷新操作,某个变量初始值为:“test”,再赋值为:“test”,并不会执行刷新操作 当你定义了一个响应变量,该响应变量改变,包裹该响应变量的Obx()方法才会执行刷新操作,其它的包裹该响应变量的...总结 分析 Obx是配合Rx响应变量使用、GetBuilder是配合update使用:请注意,这完全是俩套定点刷新控件的方案 区别:前者响应变量变化,Obx自动刷新;后者需要使用update手动调用刷新...下级页面能随意调用上级页面事件,且关闭页面后,下次重进,数据也很自然重置了(全局Bloc不会重置,需要手动重置) [jump_getx] 实现 页面一 常规代码 logic 这里的自增事件,是供其它页面调用的...或Controller类中调用你的路由),当你的应用程序被编译到web,你的路由将出现在URL中。

    7.6K103

    Go语言垃圾回收机制详解

    例如,设置GOGC=200表示触发比例为200%,即堆内存分配量达到上一次GC后存活对象的三倍触发GC。...设置GOGC=50表示触发比例为50%,即堆内存分配量达到上一次GC后存活对象的1.5倍触发GC。...os.Setenv("GOGC", "200")2.2 调用除了自动触发GC外,Go语言还允许开发者调用GC,通过调用runtime.GC()函数来触发垃圾回收。...这种方式主要用于调试和性能测试,通常不建议在生产环境中频繁使用GC。runtime.GC()2.3 系统内存压力在某些情况下,系统内存压力也会触发GC。...GC的触发条件主要包括内存分配量、调用和系统内存压力。为了优化GC性能,可以采取减少内存分配、优化数据结构、调整GC参数、减少跨堆栈引用和使用逃逸分析等措施。

    2.1K00

    Flutter完整开发实战详解(十二、全面深入理解状态管理设计)

    在所有 响应编程 中,状态管理一直老生常谈的话题,而在 Flutter 中,目前主流的有 scope_model 、BloC 设计模式 、flutter_redux 、fish_redux 等四种设计... Model 设置给 AnimatedBuildler , Listenable 的 addListener 会被调用,然后添加一个 _handleChange 监听到 _listeners 这个... Model 调用 notifyListeners ,会通过异步方法 scheduleMicrotask 去从头到尾执行一遍 _listeners 中的 _handleChange。...为什么我们可以通过 context 去获取到共享的 Model 对象呢?..._inheritedWidgets 一般情况下是空的,只有当父控件是 InheritedWidget 或者本身是 InheritedWidgets 才会有被初始化,而父控件是 InheritedWidget

    2.1K20

    Flutter 对状态管理的认知与思考

    ,执行相关有业务逻辑 现在需要将调用逻辑层方法的行为,进行统一的管理 所以,需要在调用的中间,增加一个中间层,中转所有的事件 这个中转层就是action层,可以管理所有的交互事件 来看下实现思路 [Action...floatingActionButton: FloatingActionButton( //调用业务方法 onPressed: () => bloc.increment(...增加Action层,使用端的成本无法避免 因为使用端增加的成本,就是框架侧的设计核心 [Action层使用成本] 业务逐渐的复杂起来,Action层的划分是势在必行的,我们必须归纳事件入口;业务频繁调整...可以很轻松的定位到对应的业务了 如此形式划分后,对应的页面结构也变得异常清晰,修改页面对应的模块也很轻松了 [carbon] 对View层进行相关改造后 可以非常方便的定位业务和界面模块 同时也避免的Action层一系列稍繁琐的操作...addListener(subject); } return _value; } } 需要写一个非常重要的中转类,这个也会储存响应变量的监听对象 这个类有着非常核心的逻辑:他将响应变量和刷新控件关联起来了

    1.1K41

    Flutter 绘制探索 4 | 深入分析 setState 重建和更新 | 七日打卡

    这里的返回值是为了更新 this 节点的 _child 属性,也就是更新 第三元素节点 newWidget 为 null ,会返回 null,且 child 不为 null ,会被从树上移除。...所以 shouldRepaint 只有在外界迫 使 RenderCustomPaint 重新设置 painter 才会触发,其中最常见的就是外界的 State#setState。...认识到 ValueListenableBuilder 、FutureBuilder、StreamBuilder、AnimatedBuilder 这些组件的局部刷新,或者 Provider、Bloc 这样的状态管理提高的局部刷新组件...---- 就算是状态管理 BlocBlocBuilder 也是依赖于 setState 进行重新构建的。 ?...RenderCustomPaint 设置画板属性的场景在于:其对应的 RenderObjectElement 触发 update ,由 widget#updateRenderObject 方法进行属性设置

    1.9K20

    探索JavaScript中Null和Undefined的深渊

    任何提供初始值的已声明变量将具有默认值undefined: var foo; // defaults to undefined undefined尝试访问不存在的对象属性或数组项,将发出一个值:...returns undefined 如果函数中省略了return语句,undefined则返回: var value = (function(){})(); // returns undefined 提供给函数调用的...这就是为什么typeof运算符与值一起使用时返回“对象”的原因null。最初的理由是,null过去和现在通常用作需要对象的空引用,非常类似于占位符。...typeof此后,与之相关的这种行为已被识别为错误,尽管已提出纠正建议,但出于向后兼容的目的,到目前为止,该行为更改。 这就是JavaScript环境从不将值设置为的原因null。...另一个可行的用例null也被认为是良好实践,object = null不再需要引用时,变量无效。

    72410
    领券