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

尽管观察器中的状态发生了变化,但是为什么应用重启后Flutter BloC UI没有更新?

在Flutter中,BLoC(Business Logic Component)是一种用于管理应用程序状态和业务逻辑的设计模式。它通过将状态和逻辑从UI层分离出来,使得应用程序更易于维护和测试。

当观察器中的状态发生变化时,Flutter应用程序的UI并不会自动更新。这是因为BLoC模式中的状态管理是通过Stream和StreamController来实现的,而Stream是一种异步数据流,只有在订阅时才会触发更新。

因此,当应用重启后,之前的订阅已经失效,新的UI无法获取到最新的状态更新。为了解决这个问题,我们可以在应用重启后重新订阅状态流,以确保UI能够正确地更新。

以下是一种解决方案:

  1. 在BLoC类中,使用StreamController来创建一个状态流,并提供一个公开的getter方法,用于获取该流。
代码语言:txt
复制
class MyBloc {
  final _myStreamController = StreamController<String>();

  Stream<String> get myStream => _myStreamController.stream;

  // ...
}
  1. 在UI层,使用StreamBuilder来订阅状态流,并在回调函数中更新UI。
代码语言:txt
复制
class MyWidget extends StatelessWidget {
  final MyBloc _bloc = MyBloc();

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<String>(
      stream: _bloc.myStream,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          // 更新UI
          return Text(snapshot.data);
        } else {
          // 显示加载中或默认UI
          return CircularProgressIndicator();
        }
      },
    );
  }
}
  1. 在应用重启后,重新创建BLoC实例,并重新订阅状态流。
代码语言:txt
复制
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final MyBloc _bloc = MyBloc();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyWidget(),
    );
  }
}

通过以上步骤,即可确保应用重启后的Flutter BLoC UI能够正确地更新。

对于腾讯云相关产品,推荐使用云函数SCF(Serverless Cloud Function)来部署和运行Flutter BLoC的后端逻辑。云函数SCF是一种无服务器计算服务,可以根据实际需求弹性地分配计算资源,并提供高可用性和低延迟的执行环境。

腾讯云云函数SCF产品介绍链接地址:https://cloud.tencent.com/product/scf

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

相关·内容

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

概述 如今,状态管理 是Flutter热门话题。 在过去一年,各种不同状态管理技术被提出,但截至目前,Flutter团队和相关社区还没有得出单一 首选解决方案。...我对状态管理和app架构看法 过去一年,我构建了若干大大小小Flutter app,期间我遇到并解决了许多问题,这让我明白了状态管理没有银弹。...在BLoC模式下,控件能够: 将事件分发给接收; 通过流通知状态更新。 根据最初定义,我们只能通过 接收 和 流 与BLoC进行通信。 虽然我喜欢这个定义,但我发现它在许多场景下限制性太强。...数据层/BLoC行为 1.BLoC应该是纯Dart——没有UI代码,没有导入Flutter相关类和文件,也没有BLoC中使用BuildContext。...当更新app本地状态(例如,将状态从一个控件传递到另一个控件)时,BLoC有更简单替代方案,这个后文再提。

16.1K20

Flutter响应式编程:Streams和BLoC

当然,一切都是互动,用户可以在不同页面或在同一个页面内发生各种动作,并且可以实时观察到结果。...当然,这是非常可取。建议如下: (如果有任何业务逻辑)每个页面的顶部有一个BLoC为什么不是ApplicationBloc来处理应用程序状态? 每个“足够复杂组件”都有相应BLoC。...为什么不使用InheritedWidget? 在与BLoC相关大多数文章,你会看到通过InheritedWidget实现Provider。 当然,没有什么能阻止这种类型实现。...当然,没有什么能阻止你将InheritedWidget包装在另一个StatefulWidget但是,使用InheritedWidget增加了什么呢?...但是,如果您只打算开发一个Flutter应用程序,那么根据我谦逊经验,这有点矫枉过正。 如果我们坚持这种说法,那么就没有getter或settr,只有sink和stream。

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

    flutter_bloc使用将从下图三个维度说明 [flutter_bloc] 前言 首先,有很多文章在说flutter bloc模式应用但是百分之八九十文章都是在说,使用StreamController...[表情1] 项目效果(建议PC浏览打开) Bloc范例效果 Cubit范例效果 问题 初次使用flutter_bloc框架,可能会有几个疑问 state里面定义了太多变量,某个事件只需要更新其中一个变量...实际在view反复是要用BlocBuilder去更新view,写起来有点麻烦,这里我们可以写一个,将其中state和context变量,往提出来Widget方法传值,也是蛮不错 大家保持观察者模式思想就行了...方法直接被移除了,一运行项目,bloc内部也会给出报错,需要你手动去注册处理 有一说一,虽然是破坏式改变写法,但是新写法是非常优雅,彻底改变了以前mapEventToState方法各种判断Event...小部件,它带有BlocWidgetListener和一个可选Bloc,listener以响应bloc状态变化

    5.4K41

    初学者 Flutter bloc

    flutter BlocFlutter 应用其中一个状态管理。我们可以通过它很容易处理应用中所有可能状态。...当我们使用 Flutter Bloc,我们要在应用创建事件触发交互,然后 Bloc 会发射 emit 请求数据,存在在 state ,在真实场景,它会像这样: 用户点击按钮来获取游戏列表 事件被触发...在每个类,我们将管理所需信息,别担心,我们将会讲解它们,但是现在,我们先解析关于 bloc 挂件基本概念。...我们了解这些,下面可以应用到案例 在真实项目中使用 Flutter Bloc 在这个项目中,我们将从 games API 消费数据,获取关于游戏信息并在页面展示出来。...Flutter 应用程序使用一个好状态管理是必要

    15510

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

    使用 BLoC 优点 ✅ 针对不同场景都有很出色文档 ✅ 从 UI 中分离业务逻辑,因此使得代码更容易理解 ✅ 使得产品更易测试 ✅ 容易跟踪应用程序经历状态 使用 BLoC 缺点 ✅ 其学习曲线有点陡峭...初始化设置 确保你在编辑添加了 bloc 扩展;它将帮助你创建项目所需所有标准化代码和文件(操作步骤:右击 lib 文件夹,然后它会为我们项目提供生成 bloc 选项)。...我们并没有很多状态。因此,我们需要创建一个单独 state 来管理应用程序;然而,我们可以创建多个状态,就像事件那样,通过创建一个 appstate抽象方法,并在我们自定义状态中继承。...用于输出一个新状态,这会导致 build() 函数重新构建 将这些碎片拼接起来。 到目前为止,events,states,bloc 和我们应用程序 UI没有联系起来。...:所有事情发生地方。 ✅ 它有一个 listener 属性,用来监听状态更改,并且能以特定方式对特定状态及其变化作出反应。 ✅ builder:职责是构建 UI,并且当状态更改时会重建。

    84810

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

    拿我们最熟悉计数而言,点击按钮,修改状态信息,重新构建,实现界面上数字变化效果。 二、为什么需要管理 说到 管理 一词,你觉得什么情况下需要管理?是 复杂,只有 复杂 才有管理必要。...但FloatingActionButton 组件继承自 StatelessWidget,也就是说它并没有改变自身状态能力。那点击时,为什么状态会发生变化呢?...这就相当于观察者模式,两个订阅者 同时监听一个发布者 。...2.通过 flutter_bloc 实现状态管理: 源码位置 我们前面说过,状态管理目的在于:让状态可以共享及在更新状态时可以同步更新相关组件显示,且将状态变化逻辑和界面构建进行分离。...flutter_bloc 是实现状态管理工具之一,它核心是:通过 Bloc 将 Event 操作转化成 State;同时通过 BlocBuilder 监听状态变化,进行局部组件构建。

    1.5K20

    Flutter ——状态管理 | StreamBuild

    } return ...没有数据时候返回控件 }, ) 下面是一个模仿官方自带demo“计数一个例子,使用了StreamBuilder,而不需要任何setState...刚刚介绍了stream的如何使用,是不是感觉还是懵状态,实例代码仅仅是实例,如何应用到项目中呢?我们项目不仅仅是一个简单计数,接下来我将结合项目,简单讲述一下如何使用streamBuild。...2.方法二使用状态管理bloc,如果使用了bloc,streamBuildstream 就因该传bloc数据,如果我其它地方使用也使用了这个item,那么这个stream就应该传...bloc,此时streamBuildstream 类型就不匹配了,这个item 就无法复用了,所以我放弃使用bloc状态管理 3.为何item 最外层使用StatefulWidget...本人对于 streamBuild 理解也不是很深刻,没有往太细节去讲解,只是结合自己项目去讲解了开发遇到问题,希望大家提提意见,共同进步。

    3K31

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

    可用于异步通信方案有如下: Provider ( Provider 异步通信、Provider状态管理) ValueNotifier 点击查看详情 Stream: StreamController...在Flutter项目开发,一般项目中,会有网络请求代码与Widget构建UI界面写一起,随着业务不断积累,代码量也越来越大,维护复杂度也会随着增加。...BLoC模式可以将Widget构建UI代码与业务处理代码分离出来,在BLoC模式下应用程序,一般会有全局BLoC,每一个页面也会对应有一个独立BLoC。...[在这里插入图片描述] 使用BloC模式,Flutter项目应用所有组件都在一个事件流,其中一部分组件可以订阅事件,另一部分组件则消费事件 [在这里插入图片描述] *** 2 BloC 基本使用...、事件、消费组合在一起,在本文章 第四小节有详细概述,代码如下: ///flutter应用程序入口函数 void main() => runApp(BlocMainApp()); ///应用根布局

    3.3K11

    Flutter&Flame 游戏 - 贰伍】pinball 源码分析 - 资源加载与 Loading

    不断运动动画,是通过 Timer.periodic 周期触发定时实现,每 500 ms 触发一次更新。...---- 最后,是加载页最核心业务逻辑,该项目是通过 flutter_bloc 来进行状态管理。...这里通过 BlocBuilder 来监听状态变化来构建组件。 从代码可以看出,这个像素风格进度条,通过 PinballLoadingIndicator 组件进行显示。...如下,在 lib/assets_manager 文件夹管理着资源加载 bloc 业务逻辑和 views 视图: 下面我们就进入 AssetsManagerCubit ,来看一下资源是如何加载,以及进度状态产出...---- 这样状态数据进度值 progress 就会变化,整个加载小体系就得以运转,从业务逻辑到视图更新展示,可以体会一下,bloc 在其中角色,品味一下状态管理价值。

    79910

    您不会错过2020年7个最重要Flutter更新

    在本文中,我将回顾Flutter生态系统中最重要变化以及相关变化。 Navigator 2.0 今年最重要新功能可能是Navigator 2.0。...第二个优点是可以更好地与平台路由集成,这在Flutter for Web尤其有用。在Flutter for Web应用程序,用户可以使用导航栏随意更改路线。...Flutter 1.22版本还支持iOS 14新App Clip功能。 扩展方式 扩展方法已在2019年末添加到Dart但是它们引入在2020年期间对程序包进行了重大更改。...许多软件包(其中最著名可能是provider和flutter_bloc)在BuildContext上引入了扩展方法,以更简洁地访问注入依赖项。...尽管2020年出现了种种障碍,但Flutter社区还是取得了丰收一年,并具有令人敬畏功能(已在开发),将于2021年布,我们可以期待它会变得更好。

    1.5K10

    Flutter&Flame 游戏 - 贰肆】pinball 源码分析 - 项目结构介绍.md

    不断运动动画,是通过 Timer.periodic 周期触发定时实现,每 500 ms 触发一次更新。...---- 最后,是加载页最核心业务逻辑,该项目是通过 flutter_bloc 来进行状态管理。...这里通过 BlocBuilder 来监听状态变化来构建组件。 从代码可以看出,这个像素风格进度条,通过 PinballLoadingIndicator 组件进行显示。...如下,在 lib/assets_manager 文件夹管理着资源加载 bloc 业务逻辑和 views 视图: 下面我们就进入 AssetsManagerCubit ,来看一下资源是如何加载,以及进度状态产出...---- 这样状态数据进度值 progress 就会变化,整个加载小体系就得以运转,从业务逻辑到视图更新展示,可以体会一下,bloc 在其中角色,品味一下状态管理价值。

    78810

    昨晚简记+Flutter桌面、Web开发

    UI界面的可以预览,终于等到你... [3]. 0环境,浏览运行Flutter,是什么样体验... [4]. 多设备,6平台同时调试,就问你有没有这么多钱买设备 ~ [5]....One For All梦想 浏览运行Flutter UI界面的可以预览,不止是预览 多设备,多平台同时调试 UI通多设计图生成Widget 下载工具 supernova.io 牛X哄哄Adobe...很多人提问"章口就莱",提问正确打开方式,你需要给出: 1.应用场景:说明你不是在拿我寻开心 2.你对问题了解:哪出现了问题,先别问别人,先问自己,说明你做了这点 3.脱敏小demo:写个小...+ 网络测试,下面是我在Android/iOS端做基于bloc状态管理github搜索页,直接拷贝进去。...桌面和浏览完善起来,可能又是一个时代了 但在我看开,Flutter最迷人是它UI布局优雅,组件复用丝滑,入口即化。

    1.3K40

    写给前端工程师Flutter教程

    Dart 语言 lsolate Dart UI as Code 函数类命名参数 大杀:Collection If 和 Collection For Flutter 怎么写 Widget...StatelessWidget 这个就是 Flutter “展示组件”,自身不保存状态,外部参数变化就销毁重新创建。Flutter 建议尽量使用无状态组件。...StatefulWidget 状态组件就是类似于 React “容器组件”了,Flutter 状态组件写法会稍微不一样。...可以看到一个有状态组件需要两个 Class,这样写原因在于,Flutter Widget 都是 immmutable 状态组件状态保存在 State ,组件仍然每次重新创建,Widget...---- State Management setState()可以很方便管理组件内数据,但是 Flutter 状态同样是从上往下流转,因此也会遇到和 React 同样问题,如果组件树太深,

    1.8K50

    Flutter 刷新页面:通过下拉刷新提升用户体验

    在丰富挂件Flutter 提供了一个很好方式实现下拉来刷新应用。这个手势,对很多用户来说很熟悉,就是下拉页面来触发更新动作,获取新数据并更新屏幕展示。...下拉更新基础 下拉刷新是应用移动端一个常见模式,它允许用户手动刷新页面内容。在 Flutter ,这个功能被封装在 RefreshIndicator 挂件。...当用户下拉页面时,这个函数被调用,它任务是拉取新数据并更新我们应用状态。很重要一点是,这个函数返回 Future 来保持刷新指示可见,直到新数据被下载且页面被更新。...在复杂 Flutter 应用程序拉动刷新 在更复杂 Flutter 应用程序,下拉刷新可能和多个状态层和数据源有交互。在这种场景,实现一个能够处理复杂性有强大状态管理解决方案至关重要。...当处理复杂数据和状态时,考虑使用流 streams 或者 FutureBUilder 挂件来更新 UI,当新数据反应可用时。这保证在应用程序当前状态UI 还是同步,即使数据被拉取和更新

    27110

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

    在所有 响应式编程 状态管理一直老生常谈的话题,而在 Flutter ,目前主流有 scope_model 、BloC 设计模式 、flutter_redux 、fish_redux 等四种设计...二、BloC BloC 全称 Business Logic Component ,它属于一种设计模式,在 Flutter 它主要是通过 Stream 与 SteamBuilder 来实现设计,所以...在 flutter_redux ,开发者每个操作都只是一个 Action ,而这个行为所触发逻辑完全由 middleware 和 reducer 决定,这样设计在一定程度上将业务与UI隔离,同时也统一了状态管理...6、Store 对象内部 subscribe 方法,会在 ComponentState 添加订阅方法 onNotify,如果调用在 onNotify 中最终会执行 setState更新UI。...9、以上流程最终就是 Dispatch 触发 Store 内部 _notifyController , 最终会触发 ComponentState onNotify setState更新UI

    2.1K20

    flutter中使用BloC模式

    更具我自己一点理解来看,实际上BloC设计模式,似乎和MVP没有什么本质区别,两种设计模式最终目的就是为了把和UI糅合在一起业务逻辑代码剥离开来,单独抽取到一层。...在flutter,实现BloC模式精髓就是, 展示数据从BloC来,具体到了stream上,有了stream到来,就可以使用StreamBuilder来构建ui了。...,之后,stream中产生了数据,于是,StreamBuilder又触发了UI更新,整个流程就跑通了。...2、用于不用BloC,要基于业务场景来考虑,个人觉得,对于多个UI共享一份数据例子,就非常使用BloC模式,比如订单相关页,购物车等等,因为订单状态扭转,购物车物品同步,用户发送事件相当多,这种如果使用...Redux相比大家也听过了,flutter当然也是有的,那么,和Bloc有什么区别么?

    17.5K82

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

    以上代码查看 http_main.dart 文件 实践一下下 不知道小伙还记得前面讲 BLoC 没有,忘了可以查看 Flutter 状态管理及 BLoC,这里结合 BLoC 和 Dio 实现界面和逻辑分离小例子..._instance; Dio get hp => _dio; // dio 可以在 BaseOptions 中指定域名 baseUrl, // 后续接口就不需要再添加域名了 // 如果请求接口域名发生了变化..., // 注入初始值 stream: _bloc.stream), // 注入更新 stream ); } } 以上代码查看 bloc_network 包下所有文件 当然了,福利是不可少但是需要你到项目中自己去找...,实现 BLoC 模式,实现状态管理:flutter_weather(https://github.com/kukyxs/flutter_weather) 一个课程(当时买了想看下代码规范,代码更新会比较慢...,虽然是跟着课上一些写代码,但是还是做了自己修改,很多地方看着不舒服,然后就改成自己实现方式了):flutter_shop(https://github.com/kukyxs/flutter_shop

    1.4K20

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

    在使用 Bloc 之前需要提前了解一下如下几个概念; Event Event 事件作为 Bloc 输入,一般是为了响应用户交互(例如按钮按下)或生命周期事件(例如页面加载)而添加它们。...状态作为 Bloc 输出,一般用于 UI 状态更新,页面更新绘制等;一般需要定义不同数据类型来表示数据状态变更; class TestState { final int state1;...,过渡由当前状态,事件和下一个状态组成;例如和尚上述定义 TestEvent 各个 onEvent 状态变更等均可以视为 Transitions 转场;onTransition 在 Bloc ...TestCode 和尚尝试了最简单 Bloc,点击按钮会数字会递增,目前更新 UI 是通过 setState() 方式更新数据,在下一节中会尝试用 FlutterBloc 方式进行数据更新...和尚初步体验了 Bloc,初步感觉比 Provider 稍微复杂一些,但是分工更为明确;而和尚对 Bloc 应用还不够熟练,下一节重点尝试 FlutterBloc 对于 UI 数据更新等;如有错误

    82851

    Flutter Go 到 Flutter Go web - 手把手带你轻松玩转 Flutter-web(一)

    开发工作流程目前仅适用于Chrome( 笔者 Safari 浏览(版本 12.1.1)运行正常) 尽管 Flutter for Web 还有这样或者那样问题,但是还好他只是 预览版, 未来可期,...在 Flutter 官方宣布Flutter暂时不会开发热更新(Code push) 之后, Flutter-web 无疑是的动态更新代码最快捷方式,虽然不是最佳方案,但是是最易用降级方案。...: packages/flutter_web_ui 当然 dependency_overrides 你也可以配置成本地路径,但是为了保证依赖库最新,还是用git上比较好, 下面是本地路径配置。...bloc dio city_pickers markdown path_provider cookie_jar sqflite 真的好多,怎么办,Google 大法 留坑,目前只能自力更生了...标准公共模版 markdown 模版动态化生成(合并到master分支Flutter Go 官方 APP 版本自动升级 三方共建说明 由于 flutter 内容更新较快.

    1.7K20

    优雅UI与Model绑定 Flutter DataBus使用~

    如何优雅解决这个问题,不得不提到StreamBuilder,StreamBuilder是Flutter异步构建核心组件。许多著名开源框架例如Bloc皆是基于此实现。...img 但当我刷新Key1时候, 会同时重构Key2展示两个Text,即使我key2没有发生变化,显然这不是一种合理做法。...如图,是StreamBuilder使用基本结构,StreamBuidler基于dart异步核心之一Stream,采取观察者模式,发送方通过StreamControll发送数据,观察对象接收到数据构建自己内容...在key1点击事件往Streamadd数据,这样在key1流上产生了一条数据,对应监听者收到数据,只更新自己内容,不会重建其他区域。 ? ? ?...DataBus是个人在开发实践出一种极简UI与Model绑定方法,基于此实现一套普通页面框架,已实践过多个复杂页面。

    2.5K41
    领券