首页
学习
活动
专区
工具
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、BlocListener和BlocConsumer等等。...在这里使用Bloc模式开发一个时间计时器 运行效果如下图所示: [在这里插入图片描述] 首先来看程序入口,在这里使用到了 BlocProvider ,BlocProvider相当于一个组合者,它将 Bloc

3.4K11

【源码篇】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.4K41
  • 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。

    5.6K41

    【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 的尝试暂时告一个段落,对于更高级的用法在实际应用中再进行尝试和学习

    88241

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

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

    1.1K10

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

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

    97831

    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.3K10

    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.5K82

    主题色切换+国际化 三连

    搞太复杂的例子,一篇文章又不现实。就拿主题色切换+国际化开刀吧。本文会说一下provoder、BLoC和redux的三种实现主题色切换+国际化的实现方式,所以称三连击。 ?...---- 一.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.4K20

    初学者的 Flutter bloc

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

    21710

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

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

    1.5K40

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

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

    1.2K41

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

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

    1.6K20

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

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

    2.4K20

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

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

    5.1K10

    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.

    2.1K30
    领券