首页
学习
活动
专区
工具
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 工程】001-Flutter 状态管理:Riverpod

    【Flutter 工程】001-Flutter 状态管理:Riverpod 一、概述 1、官方状态管理 状态管理处理应用程序数据流动和 UI 更新的关键概念。...在 Flutter 应用程序中,状态管理确保应用程序 UI 和数据保持同步,共享和同步数据,并提供良好的代码结构和可维护性。...性能问题:相比 StatelessWidget,StatefulWidget 在状态变化时会导致更多组件重建,可能影响应用程序性能,尽管Flutter已经进行了性能优化。...BLoC 将业务逻辑与 UI 分离,使你可以轻松地测试和重用代码。BLoC 通常与 RxDart(一种 Dart 的响应式编程库)一起使用,以提供强大的数据流处理能力。...Redux 使用纯函数(称为reducers)来处理状态更新,使你可以轻松地跟踪和管理应用程序的状态变化。这种方法适用于需要严格的状态管理和可预测性的应用程序。

    7210

    Flutter 系列之GetX的学习(1) --> 状态管理

    依赖管理: GetX 提供了一种智能方法来管理 Flutter 应用程序中的依赖项,例如视图控制器。GetX 将从内存中删除任何当前未使用的控制器。...包裹需要更新的 UI 将需要根据状态更新的部分 UI 包裹在 GetBuilder 中,指定控制器类型。...它的主要作用是监听可观察变量(如 .obs 创建的变量)的变化,并在变化时自动更新其子树。 工作原理 可观察变量:通过将变量定义为 .obs,GetX 会将其转化为可观察对象。...自动重建:当可观察变量发生变化时,Obx 会自动重新构建其内部的 UI。这意味着你不需要手动调用 setState 来更新界面。 简化代码:使用 Obx 可以减少样板代码,使得状态管理更加直观。...但是你有没有停下来想一想,你的appBar,你的脚手架,以及你的类中的大部分widget都是无状态的?那么如果你只能保存有状态的Widget的状态,为什么要保存整个类的状态呢?Get也解决了这个问题。

    9510

    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.6K41

    初学者的 Flutter bloc

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

    21710

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

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

    1.1K10

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

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

    1.6K20

    Flutter ——状态管理 | StreamBuild

    } return ...没有数据的时候返回的控件 }, ) 下面是一个模仿官方自带demo“计数器”的一个例子,使用了StreamBuilder,而不需要任何setState...刚刚介绍了stream的如何使用,是不是感觉还是懵的状态,实例代码仅仅是实例,如何应用到项目中呢?我们的项目不仅仅是一个简单的计数器,接下来我将结合项目,简单讲述一下如何使用streamBuild。...2.方法二使用状态管理bloc,如果使用了bloc,streamBuild中的stream 就因该传bloc的数据,如果我其它地方使用也使用了这个item,那么这个stream就应该传...bloc,此时streamBuild中的stream 类型就不匹配了,这个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.4K11

    写给前端工程师的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&Flame 游戏 - 贰肆】pinball 源码分析 - 项目结构介绍.md

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

    79410

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

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

    80410

    昨晚简记+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

    您不会错过的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完整开发实战详解(十二、全面深入理解状态管理设计)

    在所有 响应式编程 中,状态管理一直老生常谈的话题,而在 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 刷新页面:通过下拉刷新提升用户体验

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

    33610

    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 的数据更新等;如有错误

    86151
    领券