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

状态管理器正在不断地重建widget,而不是在更新时,如何消除这种情况?颤动

在Flutter中,状态管理器(如Provider、Bloc等)可以帮助我们管理应用程序的状态。当状态发生变化时,Flutter会重建相关的widget以反映这些变化。然而,如果状态管理器频繁地触发重建widget,可能会导致应用性能下降。

为了消除这种情况,可以采取以下几个方法:

  1. 使用Provider的Provider.value构造函数:在使用Provider包装widget时,使用Provider.value构造函数而不是默认的构造函数。这样做可以确保widget在状态改变时不会被重建。例如:
代码语言:txt
复制
Consumer<MyProvider>(
  builder: (context, provider, child) {
    return MyWidget(provider.value); // 这里不会触发重建
  },
),
  1. 使用ValueKey:在构建widget时,为其设置一个唯一的ValueKey。这样,当状态发生变化时,Flutter会尽可能地更新现有的widget,而不是重建新的widget。例如:
代码语言:txt
复制
MyWidget(
  key: ValueKey(provider.value), // 设置唯一的ValueKey
  value: provider.value,
),
  1. 使用ConsumerSelectorConsumerSelector是Provider包中提供的两个widget,它们可以帮助我们局部更新widget,而不是整个重建。Consumer会重新构建整个widget树,而Selector可以选择性地重新构建指定的widget。根据具体情况选择使用这两个widget,可以减少不必要的重建。

综上所述,通过使用Provider.value构造函数、设置ValueKey、使用ConsumerSelector等技巧,我们可以消除状态管理器频繁重建widget的情况,提升应用程序的性能和用户体验。

参考链接:

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

相关·内容

重走Flutter状态管理之路—Riverpod进阶篇

在所有这些Provider中,有时很难理解何时使用一种Provider类型不是另一种。使用下面的表格,选择一个适合你想提供给Widget树的Provider。...通过Provider来减少provider/widget重建 Provider的一个独特之处在于,即使Provider被重新计算(通常在使用ref.watch),它也不会更新监听它的widgets/...在理想的世界里,我们希望这个按钮只激活和停用之间变化时才重新build。 这里问题的根源在于,我们正在计算用户是否被允许 "上一页 "按钮中直接转到上一页。...使用StreamProvider不是StreamBuilder有许多好处。...只有当你绝对确定你想要可变的状态,才考虑使用ChangeNotifierProvider。 ❞ 使用可变的状态不是不可变的状态有时会更有效率。但缺点是,它可能更难维护,并可能破坏各种功能。

3.7K11

Widget中的state到底是什么

StatelessWidget Flutter中,Widget采用由父到子、自顶下的方式进行构建,父Widget控制着子Widget的显示样式,其样式配置由父Widget构建提供。...,Flutter框架则会标记视图状态更新UI。...与StatelessWidget通过父Widget完全控制UI展示不同,StatefulWidget的父Widget仅定义了它的初始化状态,而其自身视图运行的状态则需要自己处理,并根据处理情况及时更新UI...虽然Flutter内部通过Element层可以最大程度地降低对真实渲染视图的修改,提高渲染效率,不是销毁整个RenderObject树重建。但,大量Widget对象的销毁重建是无法避免的。...虽然Flutter内部可以通过Element层最大程度地降低对真实渲染视图的修改,提高渲染效率,不是销毁整个RenderObject树重建。但是大量Widget对象的销毁重建却是不可避免的。

2.9K20
  • flutter 起步

    Widget前调用一般做字体大小,方向,主题颜色等配置9. title该标题出现在Android:任务管理器的程序快照之上IOS: 程序切换管理器中10. onGenerateTitle跟上面的tiitle...1、flutter里面,一切皆组件,组件里面撑起flutter半边天的一个是无状态StatelessWidget组件,一个是有状态的StatefulWidget组件2、常用组件container:容器组件...DartVM中,来实现Hot Reload这种神奇的效果,DartVM将程序中的类结构更新完成后,Flutter会立即重建整个控件树,从而更新界面。...全局变量和静态成员变量,这些变量不会在热刷新更新。修改了main函数中创建的根控件节点,Flutter热刷新后只会根据原来的根节点重新创建控件树,不会修改根节点。...热刷新无法实现更新,执行一次热重启(Hot Restart)就可以全量更新所有代码,同样不需要重启App,区别是restart会将所有Dart代码打包同步到设备上,并且所有状态都会重置。

    4.5K20

    重走Flutter状态管理之路—Riverpod入门篇

    的使用这些问题诟病很多,Riverpod,正是Provider的基础上,探索出了一条心的状态管理之路。...Provider可以完全替代Singletons、Service Locators、依赖注入或InheritedWidgets等模式 简化了这个状态与其他状态的结合,你有没有为,如何把多个对象合并成一个苦恼过...❞ 通过ref.read来读取Provider的状态 ref.read方法是一种不监听的情况下获取Provider的状态的方法。 它通常用于由用户交互触发的函数中。...这一点很重要,因为默认情况下,监听一个Provider会监听整个对象的状态。但有时,一个Widget/Provider可能只关心一些属性的变化,不是整个对象。...每当用户改变,Riverpod将调用这个函数并比较之前和新的结果。如果它们是不同的(例如当名字改变),Riverpod将重建Widget

    3K20

    2021 年值得期待的 Flutter 数据流管理方案

    对于声明式的 UI 而言,UI = f(state),f 是 build 方法,方案的设计首先应该考虑的是能够使得状态的消费者可以获取到对应的数据,状态更新被通知到,并可以减少不必要的刷新。...首先,不是所有的状态都需要我们来关心,只有需要当状态变更需要对应的 UI 更新的这部分才是我们关心的。...需要用到状态的子树中使用 of 方法获取状态 下面来看看 InheritedWidget 是如何工作的。...3.4 封装通用的页面容器 业务场景中,绝大多数页面都是需要通过 api 请求获取数据,根据返回结果页面显示:加载中、正常页面、空状态、网络错误、其他错误这么几种情况。...一般情况下,整个 widget 树的最外层包上一个 ProviderScope,state 存放于此处,当然如果想覆盖上一层的state 的话,可以使用多个 ProviderScope void

    2K20

    原来Flutter代码是这样运行在原生系统的!快来了解Flutter标准模板,感受原生系统中Flutter的魅力!

    Flutter框架收到通知后,会执行Widget#build,根据新状态重建界面。 状态的更改一定要配合使用setState。...对StatefulWidget,当数据改变,需重建Widget更新界面,即Widget创建销毁会很频繁。...为此,Flutter对此机制 5 优化 其框架内部会通过一个中间层收敛上层UI配置对底层真实渲染的改动,从而最大程度降低对真实渲染视图的修改,提高渲染效率,不是上层UI配置变就要销毁整个渲染视图树重建...Flutter采用声明式UI设计,只需描述当前UI状态(即State),不同UI状态的视觉变更由Flutter底层完成。...实现同样功能的情况下,如果将Scaffold页面元素的构建封装成一个新Widget类,我们该如何处理?

    39520

    实现Flutter应用中的全局导航栏效果

    状态管理器介绍 Flutter应用中,状态管理器是一种用于管理应用状态的工具,它可以帮助开发者不同的页面之间共享数据,并在数据发生变化时通知相关组件进行更新。...如何使用状态管理器实现全局导航栏效果 要实现全局导航栏效果,可以使用任何一种状态管理器来管理导航栏的状态,并在需要更新导航栏的内容和状态。...最后,HomePage中我们可以通过调用widget.navigateTo方法来更新导航栏的状态。...需求: 我们希望实现以下功能: 整个应用中使用相同的导航栏样式和布局。 点击导航栏项,能够不同页面之间切换,并且导航栏的选中项能够同步更新。 导航栏的状态能够应用的不同页面之间共享。...通过这种方式,我们实现了全局导航栏效果,并确保了导航栏不同页面之间的同步更新。 总结 本文中,我们探讨了Flutter应用中实现全局导航栏效果的不同方法,并提供了相关的案例研究。

    12411

    从零开始的Flutter之旅: StatefulWidget

    StatefulWidget 提供不可变的配置信息以及可以随着时间变化触发的状态对象;通过监听状态的变化来达到 ui 的更新。...当我们点击其中一个未读通知信息,我们需要将其 ui 状态变成已读的样式。根据状态来改变 ui,StatefulWidget 能够很好的实现这种场景。...但就这样改变你会发现 ui 是不会刷新的,因为 StatefulWidget,如果你想改变某个值,同时要同步更新 ui,需要使用 setState 方法。...,同时 Widget Tree 与 Element Tree 的对应位置是没有变化的,那么 Widget 可以避免重建,只是会将其标记为脏状态,然后它的子 widget 将会通过 build 方法进行重建...项目正在持续更新中,感兴趣的可以关注一下。 当然如果你想了解 Android 原生,相信 flutter_github的纯 Android 版本 AwesomeGithub是一个不错的选择。

    1.1K30

    flutter跨平台原理

    Hot Reload这种神奇的效果,DartVM将程序中的类结构更新完成后,Flutter会立即重建整个控件树,从而更新界面。...热刷新无法实现更新,执行一次热重启(Hot Restart)就可以全量更新所有代码,同样不需要重启App,区别是restart会将所有Dart代码打包同步到设备上,并且所有状态都会重置。...只需要操作少量的“活跃”对象,大量的没有引用的“死亡”对象则被忽略,这种算法也非常适合Flutter框架中大量Widget重建的场景。...这时有可能出现一种特殊情况,如下图所示节点 2 绘制子节点 4 ,由于其节点 4 需要单独绘制到一个图层上(如 video),因此绿色图层上面多了个黄色的图层。...【Widget】控件层 所有控件的基类都是 WidgetWidget 的数据都是只读的, 不能改变。所以每次需要更新页面都需要重新创建一个新的控件树。

    1.9K30

    Flutter响应式编程:Streams和BLoC

    :当stream返回一个Observable不是一个Stream。...解释和说明: 第24-30行:我们正在监听stream,每当stream输出一个新的值,我们将用该值更新Text; 第35行:当我们点击FloatingActionButton,我们递增计数器并通过接收器将其发送到...某些情况下,此解决方案完全符合某些需求。 在这种情况下,你应该始终考虑StatefulWidget中初始化,以便您 可以利用dispose()方法来释放相关资源。...关于这种通用BlocProvider的一些解释 首先,如何将其作为provider使用?...建议如下: (如果有任何业务逻辑)每个页面的顶部有一个BLoC, 为什么不是ApplicationBloc来处理应用程序状态? 每个“足够复杂的组件”都有相应的BLoC。

    4.2K90

    FlutterDojo设计之道—状态管理之路(四)

    当Child Widget想要跨Widget拿到其它Widget的数据,通常就需要使用构造函数,将数据一层层传递到Child Widget,这显然不是一个好的解决方案,不仅让Widget之间有了很大的耦合...InheritedWidget,不是通过Widget Tree的构造函数一层层进行传递,如下图所示。...只读的InheritedWidget InheritedWidget默认情况下都是只读的,即只能将某个数据共享给Child Widget不能让Child Widget对数据做更新。...(RootContainer)的setState函数,InheritedWidget(Root)重建了,但是其child并不会重建,因为它是widget.child,并不会因为State的重建重建。...Flutter中,Theme的实现,就是采用的这种方式。

    50020

    提到生命周期,我们是在说什么?

    Widget更新机制: Widget是不可变的,更新则意味着销毁+重建。...StatelessWidget是不可变的,一旦创建则无需更新;对于StatefulWidget来说,State类中调用setState方法更新数据,会触发视图的销毁和重建,也将间接触发每个子Widget...State生命周期 State的生命周期,指的是在用户参与的情况下,其所关联的Widget所经历的,从创建到显示再到更新最后到停止,直至销毁的各个过程阶段。...didUpdateWidget:当Widget的配置发生变化时,比如,父Widget触发重建(即父Widget状态发生变化),热重载,系统会调用这个函数。...如上图所示,左边部分展示了当父Widget状态发生变化时,父子双方共同的生命周期;中间和右边部分则描述了页面切换,两个关联的Widget的生命周期函数是如何响应的。

    1.7K10

    Flutter 1.22 正式发布

    但是,在此版本中,我们将最佳做法的意见纳入了我们的工具中,甚至添加新的l10n信息启用了热重装支持来更新您的应用。 ?...对于不熟悉状态还原需求的用户,移动操作系统可能会杀死后台的应用程序,以回收前台应用程序的资源。发生这种情况,操作系统会通知该应用被终止以快速保存任何UI状态,以便在用户循环回到该应用时可以将其恢复。...尽管我们很高兴将状态恢复的预览版放在您的手中,但还有更多工作要做。例如,状态恢复不仅适用于Android,iOS应用程序也可以受益。此外,我们正在忙于更新自己的窗口小部件,以恢复过程中保持其状态。...滚动这种不匹配会导致性能下降。...= true; run(MyApp()); } 根据所涉及的频率差异,启用此标志可以使滚动颤动减少多达97%。

    7.5K20

    Flutter Widget框架之旅 顶

    当用户点击Container,GestureDetector将调用其onTap回调,在这种情况下,将消息打印到控制台。...当父级收到onCartChanged回调,父级将更新其内部状态,这将触发父级重建并使用新的inCart值创建ShoppingListItem的新实例。...当此小部件的父级重建,父级将创建ShoppingList的新实例,但该框架将重新使用树已存在的_ShoppingListState实例 不是再次调用createState。...通过以这种方式管理状态,您不需要编写用于创建和更新子部件的单独代码。 相反,您只需实现可以处理这两种情况的构建函数。...此外,语义上同步条目意味着保留在有状态子部件中的状态将保持附加到相同的语义条目不是视口中的相同数字位置上的条目。 全局Key 主要文章:GlobalKey 您可以使用全局键来唯一标识子窗口部件。

    6.7K20

    Flutter 中的 Shimmer 动画效果

    加载时间应用程序改进中是不可避免的。从用户体验 (UX) 的角度来看,主要是向您的用户展示正在加载。...Shimmer 用于应用程序中从服务器加载内容添加精彩的动画。这使 UI 看起来更具响应性。...它可以很好地被利用,不是传统的 ProgressBar 或 Flutter 结构中可访问的常见loading。 通常,我们打开应用程序的任何时候,我们都会看到具有动画的loading。...有多种方法可以显示这种效果。在这种情况下,我们通常会在加载信息后对与第一个小部件完全相似的小部件进行动画处理。 此演示视频展示了如何颤动中创建微光动画效果。...特性 微光动画效果有一些属性: **baseColor:**显示 Widget 上的 Shimmer 的基本颜色。这种颜色是必不可少的,因为子小部件将采用这种颜色。

    5.8K20

    Flutter技术与实战(4)

    ,提高渲染效率,不是销毁整个渲染视图树重建。...与 StatelessWidget 通过父 Widget 完全控制 UI 展示不同,StatefulWidget 的父 Widget 仅定义了它的初始化状态,而其自身视图运行的状态则需要自己处理,并根据处理情况即时更新...左边部分展示了当父 Widget 状态发生变化时,父子双方共同的生命周期;中间和右边部分则描述了页面切换,两个关联的 Widget 的生命周期函数是如何响应的。...不过,这种创建方式要求提前将所有子 Widget 一次性创建好,不是等到它们真正在屏幕上需要显示才创建,所以有一个很明显的缺点,就是性能不好。因此,这种方式仅适用于列表中含有少量元素的场景。...面对这种情况,无论是直接报错或是不响应错误路由,都不是一个用户体验良好的解决办法。

    10.8K20

    Flutter 2.5正式版发布,带来重大更新

    这种情况下不必编写任何代码,但如果想捕获 ScrollMetricNotification 更改,则可以通过捕获此监听来完成。...iOS 上不触发设备方向 #4158 [相机] 修复坐标旋转以 iOS 上设置焦点和曝光点 #4197 [相机] 修复相机预览并不总是方向改变重建 #3992 [camera] 设置不受支持的 FocusMode...同时,此版本的 DevTools 附带了对 Widget Inspector 的更新,允许将鼠标悬停在 Widget 来获取评估对象、视图属性、小部件状态等信息。...更容易的界面分析和定位:Flutter 框架中常用的 Widget 都会在左侧的 Widget 树视图中显示图标,它们根据类别进一步进行颜色编码,例如布局 Widget 显示为蓝色,内容Widget...对齐布局资源管理器和组件树的配色方案: 现在可以更轻松地从布局资源管理器Widget 树中识别相同的 Widget

    4.3K50

    Flutter Scoped_Model 浅析

    在前端开发中,我们经常能听到 redux 等状态管理的词汇。 但是对于我这种搞移动端出身的人,对这些词汇就不是很熟悉。...此外,它还重建了模型更新使用模型的所有子代。这个库最初是从 Fuchsia 基代码中提取的。...状态的集中管理以及 Widget更新 官方示例只是提供一个简单的例子,并不能展现出它的威力, 所以我们自己写一个示例。 该示例多个页面同时使用同一个数据,然后在其中一个页面更新数据。...都是无状态的,也就是说我们确实达到了数据更新更新UI的要求。...可以看到,确实只更新了使用该 Model 的 Widget。 总结 Flutter 中状态管理有很多,redux、fish_redux 等等等等。

    89130

    定义和构建索引(四)

    请注意,插入或更新需要在所有n个位片中设置一个位,不是设置单个位串。这些附加的全局设置操作可能会影响涉及填充位片索引的插入和更新操作的性能。...活动系统上构建索引 活动系统上构建(或重建)索引,有两个问题: 除非正在构建的索引对SELECT Query隐藏,否则活动Query可能返回不正确的结果。...在读写活动系统上构建索引 如果持久化类(表)当前正在使用并且可用于读写访问(查询和数据修改),则可以不中断这些操作的情况下构建新索引或重建现有索引。...注意:以下信息适用于动态SQL查询,不适用于嵌入式SQL。嵌入式SQL在编译(不是在运行时)检查MapSelecability设置。...例如,默认模式是SQLUser,不是User。该值区分大小写。 第二个参数是SQL索引映射名称。这通常是索引的名称,指的是磁盘上存储索引的名称。对于新索引,这是创建索引将使用的名称。

    76630

    重走Flutter状态管理之路—Riverpod最终篇

    最后一篇文章,我们掌握了如何读取状态值,并知道如何根据不同场景选择不同类型的Provider,以及如何对Provider进行搭配使用之后,再来了解一下它的一些其它特性,看看它们是如何帮助我们更好的进行状态管理的...当使用Firebase,要关闭连接并避免不必要的费用 当用户离开一个屏幕并重新进入时,要重置状态 Provider通过.autoDisposeModifiers内置了对这种使用情况的支持。...现在,userProvider的状态将在不再使用时自动被销毁。 注意通用参数是如何在autoDispose之后不是之前传递的--autoDispose不是一个命名的构造函数。...在这种情况下,我们可以使用read,这与listen类似,但不会导致Provider获得的值改变重新创建它的值。 在这种情况下,一个常见的做法是将ref.read传递给创建的对象。...如果你正在使用《我可以不监听Provider的情况下读取它吗》中描述的模式,你可能想知道如何为你的对象编写测试。 在这种情况下,考虑直接测试Provider不是原始对象。

    2.3K30
    领券