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

BlocProvider的使用和BLoC的实例化

BlocProvider是Flutter中的一个状态管理工具,用于将BLoC(Business Logic Component)实例化并提供给应用程序的组件。

BLoC是一种设计模式,用于将业务逻辑与用户界面分离。它通过使用流(Stream)和流订阅(StreamSubscription)来管理应用程序的状态和事件。BLoC将输入事件转换为输出状态,并将状态通知给UI层。

在Flutter中使用BlocProvider可以实现BLoC的实例化和注入。它提供了一个InheritedWidget,用于在应用程序的组件树中传递BLoC实例。通过BlocProvider,我们可以在需要使用BLoC的组件中获取到BLoC实例,从而进行状态管理和业务逻辑处理。

BlocProvider的使用步骤如下:

  1. 创建一个继承自BlocProvider的自定义类,该类需要实现create方法来创建BLoC实例。
  2. 在应用程序的组件树中使用BlocProvider包裹需要使用BLoC的组件。
  3. 在需要使用BLoC的组件中,通过BlocProvider.of(context)方法获取BLoC实例。

下面是一个示例代码,演示了如何使用BlocProvider和BLoC的实例化:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

// 自定义BLoC类
class CounterBloc {
  int _counter = 0;

  // 获取当前计数
  int get counter => _counter;

  // 增加计数
  void increment() {
    _counter++;
  }
}

// 自定义BlocProvider类
class CounterBlocProvider extends BlocProvider<CounterBloc> {
  CounterBlocProvider({
    Key key,
    CounterBloc value,
    Widget child,
  }) : super(key: key, value: value, child: child);

  @override
  bool updateShouldNotify(InheritedWidget oldWidget) => true;

  // 创建CounterBloc实例
  static CounterBloc of(BuildContext context) =>
      context.dependOnInheritedWidgetOfExactType<CounterBlocProvider>().value;
}

// 使用BLoC的组件
class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 获取CounterBloc实例
    final CounterBloc counterBloc = CounterBlocProvider.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Counter: ${counterBloc.counter}',
              style: TextStyle(fontSize: 24),
            ),
            RaisedButton(
              child: Text('Increment'),
              onPressed: () {
                // 调用BLoC的方法增加计数
                counterBloc.increment();
              },
            ),
          ],
        ),
      ),
    );
  }
}

// 应用程序入口
void main() {
  runApp(
    // 使用BlocProvider包裹CounterWidget
    CounterBlocProvider(
      value: CounterBloc(),
      child: MaterialApp(
        home: CounterWidget(),
      ),
    ),
  );
}

在上述示例中,CounterBloc是一个自定义的BLoC类,用于管理计数的状态和逻辑。CounterBlocProvider是一个自定义的BlocProvider类,用于创建CounterBloc实例并传递给子组件。CounterWidget是一个使用BLoC的组件,通过BlocProvider.of(context)方法获取CounterBloc实例,并在UI中显示计数和增加计数的按钮。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库(TencentDB)。您可以通过以下链接了解更多关于腾讯云的产品和服务:

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

相关·内容

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

使用详情 | StreamBuilder组件结合使用 | StreamBuilder 实现倒计时进度圆圈 EventBus (不考虑使用) Bloc BLoC 异步通信、BlocBuilder...基本使用BlocProvider初探 *** 1 前言 BloC 全称是 Business Logic Component(业务逻辑组件),主要作用就是将业务逻辑UI组件分离开。...[在这里插入图片描述] 使用BloC模式,Flutter项目应用里所有组件都在一个事件流,其中一部分组件可以订阅事件,另一部分组件则消费事件 [在这里插入图片描述] *** 2 BloC 基本使用...packages get 在Flutter BloC模式开发中常用组件有BlocBuilder、BlocProvider、BlocListenerBlocConsumer等等。...在这里使用Bloc模式开发一个时间计时器 运行效果如下图所示: [在这里插入图片描述] 首先来看程序入口,在这里使用到了 BlocProviderBlocProvider相当于一个组合者,它将 Bloc

3.2K11

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

,此处使用实体,是为了后期可扩展更多数据 class StreamLogic { final state = StreamState(); // 实例流控制器 final _controller...BlocProvider.value区别 看上面源码可知:BlocProvider.value没有做Stream自动关闭操作 所以BlocProvider.value不应该在普通单页面使用,可用于全局...Bloc实例 单页面Bloc使用BlocProvider去创建Bloc或Cubit create是外部实例XxxBloc,最终传入了InheritedProvider中 create就是外部传入...命名构造函数实例XxxBloc不会自动释放 BlocProvider实现了上面这三个碉堡功能,基本就可以把Stream使用模式彻底精简了 图示 [BlocProvider] 基石BlocBase 毋庸置疑...使用 使用基本Bloc一摸一样 我本来想把emit俩个新旧state对象对比判断去掉,但是想想Bloc作者对这个理念好像有很深执念,在很多地方都做了处理;所以,这边我也就保留了,也可以保留Bloc

2.3K41

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

,这些问题,刚开始使用时候,没异常感觉,但是使用bloc久了后,感觉肯定越来越强烈 state问题 初始问题:这边初始是在bloc里,直接在构造方法里面赋初值,state中一旦变量多了,还是这么写...BlocProvider一个SpanTwoCubit,这是使用Bloc常规流程 在自增点击事件里,我们调用本模块SpanOneCubit中自增方法,OK,这里我们就能同步改变SpanOneCubit...实现了类似广播一种效果 使用全局去刷新:主题,字体样式大小之类,每个页面都要使用BlocBuilder对应全局bloc去刷新对应全局view模块 Bloc API说明 BlocBuilder BlocBuilder...它用作依赖项注入(DI)小部件,以便可以将一个块单个实例提供给子树中多个小部件。 在大多数情况下,BlocProvider使用它来创建新bloc,这些bloc将可用于其余子树。...listenWhen获取先前bloc状态当前bloc状态并返回一个布尔值。如果listenWhen返回true,listener将使用调用state。

5K41

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

和尚刚学习了 FlutterBloc 基本用法,使用场景还很简单,主要是单一 Bloc 应用,今天和尚继续尝试多个 Bloc 共用场景; 和尚继续完善前两节 Demo,...方案一: 在 build() 外创建和初始 Bloc;和尚认为这种方式一定程度上扩大了 Bloc 作用域; NumberBloc _numBloc = NumberBloc(); ColorBloc...MultiBlocListener 对于多个 Bloc 场景,对于其 Bloc 监听也可以有多种方式; 方案一: 对应于 BlocProvider 方式,和尚合并前两种,尝试...小感想 和尚尝试了 Provider Bloc 两种状态管理工具,均是对 Stream 操作,和尚认为各有各优势,不能互相替代; Bloc 方式最大优势是把页面 UI 与业务逻辑拆分更清晰...现在针对状态管理方式还有很多其他方式,和尚认为无需强制使用某一种,选择适合自己对就好; ---- FlutterBloc 案例源码 ---- 和尚对 Bloc 尝试暂时告一个段落,对于更高级用法在实际应用中再进行尝试学习

84541

Flutter BLoC 教程:使用 BLoC 模式状态管理

使用 BLoC 优点 ✅ 针对不同场景都有很出色文档 ✅ 从 UI 中分离业务逻辑,因此使得代码更容易理解 ✅ 使得产品更易测试 ✅ 容易跟踪应用程序经历状态 使用 BLoC 缺点 ✅ 其学习曲线有点陡峭...✅ 简单应用不推荐使用 ✅ 有更多标准代码,但可以通过扩展解决 Flutter BLoC 教程目标 我们将构建相关简单应用,来演示 BLoC 如何使用流来管理状态,并为 bloc 编写一些测试。...初始设置 确保你在编辑器中添加了 bloc 扩展;它将帮助你创建项目所需所有标准代码和文件(操作步骤:右击 lib 文件夹,然后它会为我们项目提供生成 bloc 选项)。...:我们使用它来提供我们 bloc 一个实例,通过在应用程序根替换它,这样我们在应用程序中都能获取它。 ✅ create:创建我们 AppBlocBloc 一个实例 BlocConsumer(...)...blocConsumer 还包含了 listenWhen buildWhen,正如其名称那样,它们可以根据指定状态进行定制响应 触发 Event State class TextChangeController

45110

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

可以更便利实现 Bloc,主要是为了与 Bloc 共同使用而构建;同样需要提前了解几个概念;和尚继续以上一节中 Demo 进行扩展,添加了 Number 递增递减; BlocBuilder..., }) 分析源码可知,builder 用于相应状态 Widget,bloc 为当前提供范围仅限于单个 Widget 且无法通过父级 BlocProvider 当前级访问 Bloc...时才使用;而 condition 为可选过度细粒度,包括两个参数,之前状态当前状态,返回值为 Boolean 类型,true 为更新状态重建 Widget,false 时不重新构建; @override...BlocProvider BlocProviderBloc 供应者,创建 Bloc 并供应给其子控件树; BlocProvider({ Key key, @required Create...Widget 用来响应状态变更; bloc 与 BlocBuilder 对应 bloc 用法相同,如果省略了 bloc 参数,BlocListener 将使用 BlocProvider 当前函数自动执行查找

94431

Flutter Bloc 官方文档(BlocBuilder翻译)

Bloc Widgets BlocBuilder BlocBuilder 是一个Flutter widget,它需要一个bloc一个builder函数,BlocBuilder用响应 新状态构建一个widget...如果你想去做一些响应状态改变事情,比如导航,显示dialog等等,你可以看一下BlocListener 如果BlocBuilder 省略参数bloc参数,BlocBuilder会自动找到用BlocProvider...当前BlocProvider查询到bloc填充 BlocBuilder( builder: (context, state) { // return...widget here based on BlocA's state } ) 如果你希望去提供一个特定bloc,而不是通过BlocProvider上下文查找决定。...buildWhen获取bloc前一个状态当前状态,并返回一个布尔值。如果buildWhen返回true,那么将使用state调用builder,widget将重新构建。

1.2K10

flutter中使用BloC模式

BloC【Business Logic Component】模式是paolo soares cong hui 在2018年Google dartconf上提出,具体视频你可以参考YouTube....更具我自己一点理解来看,实际上BloC设计模式,似乎MVP没有什么本质区别,两种设计模式最终目的就是为了把UI糅合在一起业务逻辑代码剥离开来,单独抽取到一层中。...在flutter中,实现BloC模式精髓就是, 展示数据从BloC中来,具体到了stream上,有了stream到来,就可以使用StreamBuilder来构建ui了。...1、个人觉得,非常简单页面,使用BloC就有点过了,实际上像上面那个例子,点击次数计数,用StateFulWidget明显就是更优选择,使用BloC就有点为了模式而模式了。...2、用于不用BloC,要基于业务场景来考虑,个人觉得,对于多个UI共享一份数据例子,就非常使用BloC模式,比如订单相关页,购物车等等,因为订单状态扭转,购物车物品同步,用户发送事件相当多,这种如果使用

17.4K82

主题色切换+国际 三连

搞太复杂例子,一篇文章又不现实。就拿主题色切换+国际化开刀吧。本文会说一下provoder、BLoCredux三种实现主题色切换+国际实现方式,所以称三连击。 ?...---- 一.provoder实现主题切换国际:provider: ^03.1.0+1 1-主题色切换 点击颜色切换按钮,进行全局主题色切换。 ?...---- 二、redux实现主题切换国际:flutter_redux: ^0.5.3 作为一个但数据源全局状态管理库,redux采取标准分封制。...当每个人都管理好自己责任,那么就天下太平,生生不息。这里只用两个状态来说,也就是主题色国际。 ---- 1-redux三大件 点击颜色切换按钮,进行全局主题色切换。...---- 三、BLoC实现主题切换国际:flutter_bloc: ^0.22.1 如果是redux是中央集权,地方分权,那么BloC就是完全自由民主。

3.3K20

初学者 Flutter bloc

Flutter Bloc 很容易使用,因为我们和我们团队可以很快明白相关概念,不管你是什么水平,该库有非常好文档很多案例,它在 Flutter 社区中是广泛使用那个,所以我们如果有任何问题,我们都可以在网络上通过简单搜索找到对应解决方案...BlocProvider/MultiBlocProvider BlocProviders 控制给其子挂件提供一个 bloc。在使用它之前,需要初始 bloc。...当页面被初始后,这个页面中所有的 bloc 准备就绪,所以,我们需要做使用一个 RepositoryProvider 来包裹子挂件,以为所有的 bloc 提供一个存储库,而且,我们需要通过一个 MultiBlocProvider...Flutter bloc 是一个很好选择,正如你所看到,它并不复杂并且很容易理解怎么使用核心概念。并且,它提供了很多方法来管理我们视图挂件。...个人观点,我们更喜欢创建小而美的 blocs 来使得我们代码更加干净可维护性,而不是使用大文件 bloc 来管理很多事情,但是你逻辑要求你那么做,你那么做会更好。

9710

Flutter 状态管理 | 业务逻辑与构建逻辑分离

业务逻辑构建逻辑 对界面呈现来说,最重要逻辑有两个部分:业务数据维护逻辑 界面布局构建逻辑 。其中应用运行中相关数据获取、修改、删除、存储等操作,就是业务逻辑。...由于数据需要在构建界面时使用,所以很自然:在布局写哪里,数据就在哪里维护。 比如默认计数器项目,其中只有一个核心数据 _counter ,用于表示当前点击次数。...但在复杂交互场景中,业务逻辑构建逻辑杂糅在 State 派生类中,会导致代码复杂,逻辑混乱,不便于阅读维护。...这里通过 flutter_bloc 来将秒表中数据维护逻辑进行分离,由 bloc 承担。...这里用是 flutter_bloc ,你完全也可以使用其他状态管理来实现类似的分离。工具千变万,但思想万变不离其宗。谢谢观看 ~

1.4K40

Flutter 对状态管理认知与思考

BlocBloc模式Cubit模式,redux系列。。。...层不重要,这地方就不写了 fish_redux对Action层划分以及事件分发,明显要比Bloc老道很多 fish_redux使用枚举一个类就完成了众多事件定义;bloc需要继承类,一个类一个事件...:依赖注入实现 也可以使用InheritedWidget保存传递逻辑层实例Bloc就是这样做);但是自己管理,可以大大拓宽使用场景,此处就自己实现一个管理实例中间件 这边只实现三个基础api...实现需要一些灵感 ⭐⭐⭐ 自动刷新实现 将单个状态变量刷新组件,建立起了连接 一但变量数值改变,刷新组件自动刷新 某状态变化,只会自动触发其刷新组件,其它刷新组件并不触发 实现 同样,需要管理其逻辑类中间件...此处我写了一个回收控件,可以完成实例自动回收 命名含义,将实例控件绑定,控件被回收时,逻辑层实例也将被自动回收 class EasyBindWidget extends StatefulWidget

1.1K41

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

由于 BlocProvider.of(context) 获取 Bloc 对象,需要上级上下文存在该 BlocProvider ,可以在最顶层进行提供。...repository 层界面层完全可以同步进行开发,最后通过 Bloc 层将 repository 界面 进行整合。...repository 层作为数据获取方式是完全独立,比如 todo 案例,Bloc Provider 可以共用一个 repository 层,因为即使框架使用方式有差异,但数据获取方式是不变...还通过了非常多实例、文档,有兴趣可以自己多研究研究。...我们在使用前应该明白: [1]. 状态是否需要被共享修改同步。如果否,也许通过 [State] 封装为内部状态是更好选择。 [2]. [业务逻辑] [界面状态变化] 是否复杂到有分层必要。

1.2K20

Flutter 桌面探索 | 自定义可拖拽导航栏

而且排序之后,下次进入时会使用该顺序,而且在其他设备上也会同步该配置顺序。这说明用户登录时会从服务器获取配置信息,作为导航栏状态数据决定显示。...---- 这里用我比较熟悉 flutter_bloc 来对激活菜单数据进行管理。现在引入 Cubit 后,对于小数据进行管理变得非常方便。...Bloc ,可以单独抽离一个组件进行包裹 BlocProvider,这样其子树上下文中才可以访问到相关 Bloc。...这里使用是 Draggable DragTarget 组合,其中 Draggable 指的是可拖拽物体,DragTarget 指的是受体目标。...,根据 dragId targetId 获取在列表中索引,然后移除添加而已。

2.1K20

实例说明图像灰度二值区别

首先我们还是得了解一下定义(搬运工): 灰度:在RGB模型中,如果R=G=B时,则彩色表示一种灰度颜色,其中R=G=B值叫灰度值,因此,灰度图像每个像素只需一个字节存放灰度值(又称强度值、亮度值...一般常用是加权平均法来获取每个像素点灰度值。...二值:图像二值,就是将图像上像素点灰度值设置为0或255,也就是将整个图像呈现出明显只有黑视觉效果 下面是matlab实验,请根据实验过程以及结果来进一步理解定义: 首先读入原图像并显示...最后将灰度图像进行二值并显示: >> level = graythresh(J);   %自动获取阈值(0-1) >> imgbw = im2bw(J,level);   %二值方法 >>...结果很明显了,自己思考并理解灰度二值定义吧

4.9K10

UiPath 中 List 集合实例使用

前言 大家好呀,我是 白墨,一个热爱学习与划水矛盾体。 最近刚接触 RPA ,在学习 UiPath ,昨天需求要用到 List 集合,直接创建 List 集合并使用会报错,需要对集合进行实例。...实例 List 变量 UiPath 虽然是拖拉拽编程方式,内部还是 VB 语法。所以,初始 List 集合,还是得从 VB 语法入手。...我们在UiPath中创建项目时,需要选择 VB C# 语言,这其中VB就是 VB.NET 。默认是 VB.NET。...当然","不好也可以","随便你"} 其中 listName 是变量名, as 后 New List(of String) 就是在实例一个泛型为 String List 集合, From {...[实例集合] 很简单,只需要在 Default 里面填入 New List(of String) 即可。我不需要赋初始值,所以 From 我没有写,有需要写上即可。 3.

2K30
领券