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

BlocBuilder会更改状态,但不会更改屏幕上的文本

BlocBuilder 是 Flutter 中的一个组件,用于响应式地构建 UI。它根据 Bloc(Business Logic Component)的状态变化来更新 UI。如果你发现 BlocBuilder 更改了状态,但屏幕上的文本没有更新,可能是以下几个原因:

基础概念

  • Bloc: 是一种模式,用于管理应用的状态。它将业务逻辑与 UI 分离。
  • BlocBuilder: 是一个 Flutter 组件,用于监听 Bloc 的状态变化并重新构建 UI。

可能的原因及解决方法

  1. 状态未正确更新
    • 确保你的 Bloc 中的状态确实发生了变化。
    • 使用 print 或调试工具检查状态是否按预期更新。
  • BlocBuilder 监听错误的状态流
    • 确保 BlocBuilder 正确地监听了包含文本状态变化的流。
  • UI 组件未正确重建
    • 检查 BlocBuilder 内部的 builder 函数是否正确返回了新的 UI 组件。

示例代码

假设我们有一个简单的 Bloc,用于管理一个计数器的状态:

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

abstract class CounterEvent {}

class IncrementEvent extends CounterEvent {}

class CounterState {
  final int count;
  CounterState(this.count);
}

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterState(0));

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

在 UI 中使用 BlocBuilder:

代码语言:txt
复制
BlocBuilder<CounterBloc, CounterState>(
  builder: (context, state) {
    return Text('Count: ${state.count}');
  },
),

解决步骤

  1. 验证状态更新
    • mapEventToState 方法中添加日志,确保每次事件触发时状态都在更新。
  • 检查 BlocBuilder 的使用
    • 确保 BlocBuilder 包裹了正确的 Bloc 实例,并且 builder 函数内部正确地使用了状态。
  • 强制重建
    • 如果上述步骤都正确无误,尝试在 BlocBuilder 外部包裹一个 Key 来强制 Flutter 重建 UI 组件。
代码语言:txt
复制
BlocBuilder<CounterBloc, CounterState>(
  key: ValueKey(state.count), // 使用状态的某个唯一值作为 Key
  builder: (context, state) {
    return Text('Count: ${state.count}');
  },
),

通过这些步骤,你应该能够诊断并解决 BlocBuilder 更改状态但屏幕上的文本没有更新的问题。如果问题依旧存在,可能需要进一步检查其他可能影响 UI 更新的因素,如父组件的重建逻辑等。

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

相关·内容

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

相关代码的注释写的比较多,大家可以着重看看 main_bloc state变量是框架内部定义的,会默认保存上一次同步的MainSate对象的值 class MainBloc extends Bloc的XxxBloc了,这里的全局XxxBloc,state状态都会被保存的,除非关闭app,否则state里面的数据都不会被还原!...BlocBuilder处理构建小部件以响应新状态。BlocBuilder与非常相似,StreamBuilder但具有更简单的API,可以减少所需的样板代码量。...它应用于需要在每次状态更改时发生一次的功能,例如导航,显示a SnackBar,显示aDialog等。 listener`与in和函数不同,每次状态更改(**不**包括初始状态)仅被调用一次。...BlocConsumer与嵌套类似BlocListener,BlocBuilder但减少了所需的样板数量。BlocConsumer仅应在需要重建UI和执行其他对状态更改进行响应的情况下使用cubit。

5.5K41

Flutter Bloc 官方文档(BlocBuilder翻译)

Bloc Widgets BlocBuilder BlocBuilder 是一个Flutter widget,它需要一个bloc和一个builder函数,BlocBuilder用响应 的新状态构建一个widget...,BlocBuilder和StreamBuilder十分相似,但是它有一个更简单的API来减少所需的样板代码数量,builder函数可能会被多次调用,并且应该是一个纯函数,它返回一个小部件来响应状态。...如果你想去做一些响应状态改变的事情,比如导航,显示dialog等等,你可以看一下BlocListener 如果BlocBuilder 省略参数bloc参数,BlocBuilder会自动找到用BlocProvider...和当前BlocProvider查询到的bloc填充 BlocBuilder( builder: (context, state) { // return...如果buildWhen返回false,则不会调用带有状态的builder,也不会发生任何重建。

1.3K10
  • 初学者的 Flutter bloc

    比如,如果 Bloc 发射一个成功的状态,视图将根据返回的游戏列表重新构建,但是如果返回的状态是错误的,视图会根据错误信息或者我们要展示的其他内容来重新构建。...这个挂件不会重新构建视图,它只会监听。 BlocBuilder 通过这个挂件,我们能够根据它们的状态重新构建我们的挂件。...该 API 我们选择的是 RAWG。为了使用它,我们需要创建一个 API Key。 本文我们不会介绍存储库和服务部分,但是如果你感兴趣,可以参考文本的代码。 下面是我完成的应用效果。...这个挂件有四种可能的状态: 成功:真实分类列表 错误:展示错误信息 加载:展示一个 CircularProgressIndicator 挂件 选中:更改选中类别的大小和颜色 Game by category...嗯,当一个状态被发射,我们想要根据对应的数据重新构建视图。为了实现这个,在我们视图中添加了 BlocBuilder。

    21210

    Flutter常见开发问题

    但是 Flutter 中的按钮不是将标题作为字符串,而是另一个小部件。这意味着**在按钮内你可以有文本、图像、图标和几乎任何你可以想象的东西,**而不会打破布局限制。...下次重新启动或热加载应用程序时,Flutter 基本上会在现有应用程序之上修补更改,从而提供极快的刷新。 注意:通过热重载或重启所做的更改不会保存在设备 APK 或 IPA 文件中。...setState() 本质上是一种告诉应用程序使用新值刷新和重建屏幕的方法。 什么是有状态和无状态小部件? TL;DR:允许您刷新屏幕的小部件是有状态小部件。没有状态的小部件是无状态的。...更详细地说,一个内容可以改变的动态小部件应该是一个有状态的小部件。无状态小部件只能在更改参数时更改内容,因此需要在小部件层次结构中的位置点上方完成。...包含静态内容的屏幕或小部件应该是无状态小部件,但要更改内容,需要有状态。 你如何处理 Flutter 代码中的缩进和结构?

    6.8K30

    Flutter常见开发问题

    这意味着**在按钮内你可以有文本、图像、图标和几乎任何你可以想象的东西,**而不会打破布局限制。这也让您可以非常轻松地制作自定义小部件,而在 Android 中制作自定义视图是一件相当困难的事情。...下次重新启动或热加载应用程序时,Flutter 基本上会在现有应用程序之上修补更改,从而提供极快的刷新。 注意:通过热重载或重启所做的更改不会保存在设备 APK 或 IPA 文件中。...setState() 本质上是一种告诉应用程序使用新值刷新和重建屏幕的方法。 什么是有状态和无状态小部件? TL;DR:允许您刷新屏幕的小部件是有状态小部件。没有状态的小部件是无状态的。...更详细地说,一个内容可以改变的动态小部件应该是一个有状态的小部件。无状态小部件只能在更改参数时更改内容,因此需要在小部件层次结构中的位置点上方完成。...包含静态内容的屏幕或小部件应该是无状态小部件,但要更改内容,需要有状态。 你如何处理 Flutter 代码中的缩进和结构?

    6.7K20

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

    底部导航栏通常位于屏幕底部,由一组导航项(通常是图标和标签组合)组成,用户可以通过点击不同的导航项来切换应用程序的不同部分。...然后,我们使用BlocProvider将NavigationBloc提供给底部导航栏和相关页面组件,并使用BlocBuilder在这些组件中监听和更新状态。...通过设置Container的背景颜色、圆角和文本内容,我们可以实现不同样式的徽章,并通过动态改变文本内容来实现不同数量的提示。...7.2 动态更改导航栏项 有时候我们需要根据用户的登录状态、权限等动态地更改底部导航栏的内容,例如显示不同的导航项或调整某个导航项的样式。...此外,我们还探讨了如何利用状态管理库(如Provider和Bloc)来管理底部导航栏的状态,以及如何实现一些高级功能,如添加徽章、动态更改导航栏项以及实现动画效果等。

    47810

    Material Design — 菜单(Menus)

    情景中的菜单应该根据app的当前的状态动态地更改其中的菜单选项。...·与当前情景无关的菜单项可能会被删除 ·与情景相关但需要满足某些条件的菜单项可能被禁用(如置灰)。 例如,当选择文本后,“复制”这个菜单选项才变为可选择项。...单个菜单项状态 某些app状态可能会导致只有一个菜单项的情景菜单。 例如,当使网页上的文本高亮时,Android仅显示“复制”菜单项,因为用户无法“剪切”或“粘贴”文本。 ?...向上展开的简单菜单 ·不要在简单菜单弹出的第一个选项上放列表中的非已选项(如下图)。 ? ·但在靠近屏幕边缘时,简单菜单会重新定位其垂直对齐方式,以便所有菜单项都完全可见。 ?...·简单的菜单总是与列表项文本的开头左对齐,并且不会基于点击位置重新水平定位(如下图)。 ?

    5.8K100

    Flutter 中 stateless 和 stateful widget 的区别

    小部件的状态 状态是在构建期间同步读取小部件类的信息 - 也就是说,当小部件显示在屏幕上并且如果信息在其生命周期内发生更改时可能会发生变化。...出于这个原因,外观和属性在小部件的整个生命周期中保持不变。 当我们描述的 UI 部分不依赖于任何其他小部件时,无状态小部件会很有用。无状态小部件的示例是文本、图标、图标按钮和凸起按钮。...即使有外力作用在它上面,它也不会更新。 每当StatelessScreen小部件初始化时,build就会调用该方法。之后,小部件将打印在屏幕上。...一旦我们调用这个小部件并按下按钮,我们就会让文本字段的值自动改变。 在这种类型的应用程序中,我们可以通过实现. 是一种在有状态小部件类中调用的方法。每次调用时,此方法都会更改有状态小部件的值。...它将被渲染一次并且不会自行更新setState() 有一个内部并且可以在输入数据更改时重新渲染setState() 静态小部件 动态小部件 除非发生外部事件,否则无法在运行时更新 可以在运行时根据用户操作或数据更改进行更新

    2.3K10

    View编程指南

    如果子View是部分透明的,则来自两个view的内容在被显示在屏幕上之前被混合在一起。每个superview将其子view存储在有序数组中,并且该数组中的顺序也会影响每个子View的可见性。...虽然更改frame,bounds和center的方法是相互独立的,但其中一个属性的更改会影响其他属性,方法如下: 当您设置frame属性时,bounds属性中的size值将更改为与frame矩形的新大小相匹配...设置bounds属性的大小时,frame属性中的size值会更改为与bounds矩形的size相匹配。 默认情况下,view的frame不会剪切到其superview的frame。...每个子View的坐标系建立在其super的坐标系上。所以当你修改一个View的transform属性时,这个改变会影响view及其所有的subview。但是,这些更改仅影响屏幕上view的最终呈现。...view controller提供了许多重要的行为,例如协调屏幕上的view显示,协调从屏幕上删除这些view,响应低内存警告释放内存,以及响应接口方向更改而旋转view。

    2.3K20

    CS_198_基于时间和物料开票的服务-1

    complete’ 状态。...在 修改服务通知单:初始 屏幕上输入上一章节中的通知编号。选择 回车 确认输入。2. 从右边的操作框中选择 电话日志。3. 在 会话主题 区域中,输入任意长度的文本。4....选择 继续 (回车) 来确认已输入的有关呼出电话的数据。5. 在 修改服务通知单:服务申请屏幕中,选择 细节 标签页。 6. 输入电话交谈的文本,在 作业 区域选择 文本。7....在该案例中,在事务 IW51 的报价创建过程中,特征估价屏幕不会显示,而且服务订单将不会在此时创建。当销售订单根据接受的报价创建并保存时,服务订单会自动创建。...在 显示一般任务清单:初始 屏幕中,输入以下内容:字段名称描述用户操作和值注释组任务清单分组代码输入上一步中复制的任务清单组6. 选择 任务清单。7.

    5300

    最新iOS设计规范七|10大视觉规范(Visual Design)

    你可以将APP设置为动态适应各种特征,包括: 不同的设备屏幕尺寸,分辨率和色域(sRGB / P3) 不同的设备方向(纵向/横向) 拆分视图 iPad上的多任务处理模式 动态类型文本大小更改 基于区域设置启用的国际化功能...请注意,当诸如录音和位置跟踪之类的后台任务处于活动状态时,全屏iPhone上的状态栏不会更改高度。 如果你的APP当前隐藏状态栏,请重新考虑全屏iPhone的隐藏与否。...人们倾向于接受充满艺术的东西,但动画没有意义或似乎违反物理法则时,他们会感到迷失方向。例如:如果有人通过从屏幕顶部向下滑动来显示视图,他们应该也能够通过向上滑动来消除视图。 使用一致的动画。...另外,请确保您的启动屏幕与设备的当前外观模式匹配; 避免在启动屏幕上包含文本。因为启动屏幕中的内容不会更改,所以任何显示的文本都不会被本地化。 弱化启动。...使用像今天和明天这样的友好的术语是很合适的,但如果不考虑当前的区域设置,这些术语可能会令人困惑或不准确。考虑一个在午夜之前开始的事件。在一个时区,活动可能从今天开始。

    8.1K30

    Material Design — 提示框( Dialogs)

    全屏幕提示框例外 全屏对话框可能会打开其他对话框,例如选择器,因为它们的设计可以容纳额外的材料层,而不会显着增加app深度的感知与视觉干扰。 ?...例如,用户可以聆听多个铃声,但只能在触摸“ok”时进行最终选择。 点击确认对话框中的“取消”,或按Android的“后退”,取消操作,放弃所有更改并关闭对话框。 ?...要提供明确的“取消”与“确定”按钮 ---- 全屏提示框(Full-screen Dialogs) 仅限手机:由于空间有限,全屏幕对话框可能更适合使用在手机,而不是屏幕较大的设备上。...用法 全屏幕提示框在一系列任务(例如创建日历入口)被提交或取消之前分组,并在点击“保存”后保存选择。 触摸“X”会放弃所有更改并退出提示框。...左:不要用“关闭”这样的词作为确认    右:离开时进行提示 导航 全屏幕对话框中使用的“X”不同于向返回箭头,箭头能表示视图的状态实时被保存。

    5.2K101

    Android Studio 新特性详解

    以我们的 Rally 理财应用为例。我可以直接更改应用中提醒对话框的文本。在下图中可以看到,在我进行输入时,预览几乎是实时同步更新的。...我可以像刚才一样更改文本,同理也可以更改数字和布尔值。 远期规划 刚才我向大家展示了 Arctic Fox 和 Bumblebee 中提供的功能,以及一些 Chipmunk 中处于开发阶段的功能。...而在轻量模式下编辑 Kotlin 文件时,将不会像通常那样执行各种常见且开销较大的编辑器验证,但您仍然可以使用 "转到声明" 以及类似的基本编辑功能。...如果我输入毫无意义的内容,通常情况下会产生红色的警告,但它现在不会这么做。而如果我保存该文件,会暂时解除轻量模式的限制,这样您就可以获得所需的基本验证。...这些特性同样是处于早期探索阶段,但很有前景,希望我们会取得一些成果。

    2.8K20

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

    BlocBuilder 和尚理解为 Bloc 构造器,主要用于构建 Widget 以响应新的状态,相较于 StreamBuilder 更便捷;可替代和尚上一节使用的 setState(); const...BlocListener BlocListener 与 BlocBuilder 应用有相似之处;其中 listener 用于监听状态变更,可在此做出相应的业务处理; class BlocListener...Widget 用来响应状态的变更; bloc 与 BlocBuilder 对应的 bloc 用法相同,如果省略了 bloc 参数,BlocListener 将使用 BlocProvider 和当前函数自动执行查找...listener 的监听;此时的过滤与 BlocBuilder 中的 condition 过滤无关; listener 在每次状态变更时调用,其中包括上下文环境和当前状态两个参数; @override...和尚在扩展上一节的 Demo 时,点击进入页面时会黑屏,提示如下错误; ?

    97831

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

    【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 【x2】各种系列的视频教程 免费开源 关注 你不会迷路 【x3】系列文章 百万 Demo 随时 复制粘贴 使用 *** 在 Flutter...中可用于异步通信的方案有如下: Provider ( Provider 异步通信、Provider状态管理) ValueNotifier 点击查看详情 Stream: StreamController...在Flutter项目开发中,一般的项目中,会有网络请求的代码与Widget构建的UI界面写一起,随着业务的不断积累,代码量也越来越大,维护的复杂度也会随着增加。...buildWhen参数,用于向BlocBuilder提供可选的条件,返回 true,那么将调用state执行视图的重新构建,如果返回false,则不会执行视图的重建操作。.../// 参数 previous 上一次的数据 /// 参数 current 当前的数据 buildWhen: (String previous,String current){

    3.4K11

    开始使用-编写你的第一个Flutter应用程序 顶

    第1步:创建起始Flutter应用程序 第2步:使用外部包装 第3步:添加一个有状态的小部件 第4步:创建一个无限滚动ListView 第5步:添加交互性 第6步:导航到新的屏幕 第7步:使用主题更改UI...如何实现有状态的小部件。 如何创建一个无限的,延迟加载的列表。 如何创建并导航到第二个屏幕。 如何使用主题更改应用程序的外观。...如果需要,请使用以下链接中的代码重新开始正轨。 pubspec.yaml(pubspec.yaml文件不会再更改。)...首先,通过添加突出显示的文本创建一个最小类: class RandomWordsState extends State { } 3.在添加状态类后,IDE会抱怨该类缺少构建方法...点击它什么也没做,因为_pushSaved函数是空的。 3.当用户点击应用栏中的列表图标时,建立一条路由并将其推送到导航器的堆栈。 此操作会更改屏幕以显示新路由。

    9.5K20

    最新iOS设计规范四|3大界面要素:视图(Views)

    一、动作表单(Action Sheets) 动作表单是一种特定的警示样式,它表示与当前上下文有关的两个或多个选择。在较小的屏幕上,动作表单会从屏幕底部向上滑动。...在较大的屏幕上,动作表会以弹出框的形式同时出现。 ? 在执行潜在的破坏性操作之前,请使用操作表请求确认。如果是非破坏性的操作可以使用下拉菜单(控件的一种,后面会讲到)。...屏幕上需要阅读的文字应该越少越好,可以尝试编写一个标题并且避免添加额外的信息。因为单字标题很少会提供有用的信息,所以可以考虑以问问题或使用短句的方式,尽可能的将标题保留在同一行上。...集合的布局是可以随时更改的。但需要注意的是,如果你是在用户进行查看集合或者正在与之进行交互时来更改动态布局的话,请确保更改是有意义的且是易于跟踪的。...虽然你可以使用各种类型的字体、颜色以及对齐方式,但必须保持内容的可读性。采用动态类型文本是个好办法,这样如果用户在设备上更改文字大小,你的文本内容仍然会有友好的体验。

    8.5K31

    为什么你永远不应该在CSS中使用px来设置字体大小

    在网页上,默认字体大小为 16px 。一些用户从不更改默认设置,但许多人会更改。但默认情况下, 1em 和 1rem 都将等于 16px 。 “Em” 最初是指 “M” 字符的宽度,这也是名称的由来。...批判性地说,这意味着如果你的样式表使用 px 在任何地方设置 font-size ,那么基于该值的任何文本都将无法由用户更改。 那是非常糟糕的事情。它是不可访问的,甚至可能会阻止某人完全使用该网站。...只有文本本身变大了。因为边框宽度和边距都是在 px 中设置的,它们保持不变,不会缩放。 但是请注意,如果将CSS中的 px 更改为相应的 rem 值,会发现线条和间距确实变大了!...(zh-Hans) 所以,这里的总结是: 当用户更改字体大小时, px 值不会缩放。 em 和 rem 的值会随字体大小成比例调整。...https://codepen.io/collinsworth/pen/KKepeMQ 选择哪一个 因此,知道 em 和 rem 会随字体大小缩放,但 px 值不会,那么我们该怎么办?

    1.8K20

    最新iOS设计规范五|3大界面要素:控件(Controls)

    信息按钮 翻转视图后,“信息”按钮可显示有关应用程序的配置详细信息,有时会显示在当前视图的背面。信息按钮有两种样式:浅色和深色。选择与您的应用程序设计最匹配且不会在屏幕上看不清楚的样式。 ?...最好采用动态类型,这样当用户更改设备上的文本大小时,标签的可读性仍然可以很好。同时,你还需要在启用了辅助功能选项的情况下测试标签,例如粗体文本。...在iOS 12及更早版本中,以及在全面屏显示的设备上,网络活动指示器会在发生联网时在屏幕顶部的状态栏中旋转,联网完成后消失。和活动加载指示器样式一样,并且是非交互式的。 ?...虽然段可以包含文本或图像,但将两者被混合在一个控件中可能会导致界面混乱让人难以理解。 若自定义分段控件,请保证内容协调。若要更改(自定义)分段控件的视觉样式,请确保内容看起来协调可读并且对齐。...额外的提供文本标签描述开关状态是多余的,还会使界面混乱不堪。 可以用开关来管理相关界面元素的可用性。开关通常会影响屏幕上的其他内容。例如,在“设置”中打开“飞行模式”开关会禁用其他功能/设置。

    8.6K30

    How to use Git

    因为没有新的文件、没有对文件作出更改、暂存区没有任何需要 commit 的内容……没有更改或操作,因此我喜欢将其称为休息状态。...要向下滚动,按下 j 或 ↓ 一次向下移动一行 d 按照一半的屏幕幅面移动 f 按照整个屏幕幅面移动 要 向上滚动,按上 k 或 ↑ 一次向上移动一行 u 按照一半的屏幕幅面移动 b 按照整个屏幕幅面移动...活跃分支名称旁边会显示一个星号 删除分支 分支用来进行开发或对项目进行修正,不会影响到项目(因为更改是在分支上进行的)。...如果你切换到 master 分支并尝试删除 sidebar 分支,git 也不会让你删除,因为 sidebar 分支上的新 commit 会丢失!...--all 选项会显示仓库中的所有分支。 合并 当你在主题分支上做出更改后,如果觉得不想要该分支上的更改,则可以删掉该分支,或者你决定要保留更改,则可以将该分支上的更改与其他分支上的更改合并。

    1.1K10
    领券