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

Flutter的setState更新原理和流程

分析 Flutter状态类: StatelessWidget:无状态类,没有状态更新,界面一经创建无法更改; StatefulWidget:有状态类,当状态改变,调用setState()方法会触发StatefulWidget...也就是只有当我们的类是有状态类的时候才能进行状态刷新,setState也是在State(有状态类)类里 解析 :framework.dart文件State类 调用 setState() 必须是没有调用过...BuildOwner 类 scheduleBuildFor方法 BuildOwner类是widget framework的管理类,它跟踪那些需要重新构建的 widget。...Flutter渲染机制—UI线程文中小节[2.1]介绍Engine::ScheduleFrame()经过层层调用,最终会注册Vsync回调。..._active=false 的时候直接返回 管理类 1.告诉管理类方法自己需要被重新构建: owner.scheduleBuildFor(this) 调用 window.scheduleFrame()

80920

Flutter 的状态管理方案:setState、BLoC、ValueNotifier、Provider

这是 Flutter SDK 中 ValueNotifier 的实现: /// A [ChangeNotifier] that holds a single value. /// /// When [value...最后的比较 上述三种实现(setState、BLoC、ValueNotifier)非常相似,只是处理加载状态的方式不同。...如下是他们的比较方式: setState ↔︎ 最精简的代码 BLoC ↔︎ 最多的代码 ValueNotifier ↔︎ 中等水平 所以 setState 方案最适合这个例子,因为我们需要处理单个小部件的各自的状态...在构建自己的应用程序时,你可以根据具体情况来评估哪个方案更合适 小彩蛋:实现 Drawer 菜单 跟踪当前选择的选项也是一个状态管理问题: 我首先在自定义 Drawer 菜单中使用本地状态变量和 setState...Flutter & Firebase Udemy 课程中有深入介绍。

4.6K00
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    告别setState()! 优雅的UI与Model绑定 Flutter DataBus使用~

    Flutter开发中,大家都绕不开Widget的刷新,setState()是最简单的用法。...但随着当app的交互变得复杂,setState出现的次数便会显著增加,每次setState都会重新调用build方法,这势必对于性能以及代码的可阅读性带来一定的影响。...如何优雅的解决这个问题,不得不提到StreamBuilder,StreamBuilder是Flutter中异步构建的核心组件。许多著名的开源框架例如Bloc皆是基于此实现。...其实Flutter中还提供了一个强大组件SteamBuilder来协助我们处理控件的刷新构建。 ---- StreamBuilder ? ?...这样Widget的构建完全由Stream触发,控件无需自行setState,它的构建完全由数据驱动,是一种响应式编程。也是许多开源框架例如Bloc等核心原理。

    2.5K41

    【- Flutter 性能 -】都 2021 年了,你的动画还在用 setState ?

    其根本原因是在较高的层级进行了 setState ,导致其下树被遍历,在这种情况下执行动画,是不可取的。我们需要做的是降低更新元素节点层级。...更新还是要靠 setState。但比起上面的那个setState ,这里的 setState 的影响就小很多。...builder (下图),可以看出回调的这个 child 仍是传入的 child,这样不会构建新的 Shower 组件,也不会触发 Shower 组件对应 State 的 build 方法,一切动画需要的都在...---- 这样来看,AnimatedBuilder 似乎也没有什么神秘的,了解了这些,再去看 Flutter 框架中的封装的各种动画组件,你就会豁然开朗,这便是知一而通百。...总结一下,并不是说 setState 不好,而是用的时机对不对。AnimatedBuilder 本质上也是使用 setState 进行触发更新的,所以看待问题不要片面和激进。

    1K20

    Widget中的state到底是什么

    在上一篇文章Widget,构建Flutter界面的基石中,我们深入理解了Widget是Flutter构建界面的基石,,也认识了Widget、Element、RenderObject是如何互相配合,实现图形渲染工作的...Flutter在底层做了大量的渲染优化工作,使得我们只需要通过组合、嵌套不同类型的Widget,就可以构建出任意功能、任意复杂度的界面。...setState方法通知Flutter框架:“我这儿的数据变啦,请使用更新后的_imageInfo数据重新加载图片!”。...StatelessWidget是静态的,一旦创建则无需更新;而对于StatefulWidget来说,在State类中调用setState方法更新数据,会触发视图的销毁和重建,也将间接地触发每个子Widget...这里你可能会有疑问,如果我在一个默认不可变的场景下使用StatefulWidget,那么我肯定不会主动调用其setState方法啊,如果我不主动调用setState,那么不就不会影响StatefulWidget

    2.9K20

    Flutter State生命周期

    2.2.1实测 写个有状态类并混入WidgetsBindingObserver配合监听特殊状态及其一个按钮,调用setState, 给生命周期的方法新增打印: import 'package:flutter...点击按钮打印: I/flutter (16141): 状态刷新 setState // count也+1了,说明重新调用过build。...2.2.2流程图 图解主要部分: 1.构建(build); 2.如果用户调用了setState时则状态刷新,重新build; 3.如果销毁先停用然后dispose销毁再结束; 构造函数 构造函数不属于生命周期...build 构建 会在以下场景调用: initState()之后; didUpdateWidget()之后; setState()之后。 didChangeDependencies()之后。...didUpdateWidget 组件更新 当组件的状态改变的时候就会调用didUpdateWidget(),比如调用了setState(), 在widget重新构建时,Flutter framework

    85020

    Flutter | 启动,渲染,setState 流程

    组件树在构建完毕后,回到 runApp 的实现中,当调完 attachRootWidget 后,最后一行会调用 WidgetsFlutterBainding 实例的 scheduleWarmUpFrame...,这可以保证在绘制过程中不会触发新的重绘。..._inDirtyList = true; } 复制代码 当调用 setState 后: 1,首先调用 markNeedsBuild 方法,将 element 的 dirty 标记为 true,表示需要重建...到此,setState 中最核心的就是触发了一个 请求,在下一次屏幕刷新的时候就会回调 onBeginFrame,执行完成之后才会调用 onDrawFrame 方法。...上屏,会将绘制出的bit数据发送给GPU .....///// } } 复制代码 以上,便是 setState 调用的大概过程,实际的流程会更加复杂一点,例如在这个过程中不允许再次调用 setState

    1.2K10

    Stateful 组件的生命周期​

    Framework会在多种情况下调用此方法: 调用 initState 方法后。 调用 didUpdateWidget 方法后。 收到对 setState 的调用后。...此方法可以在每一帧中调用,此方法中应该只包含构建组件的代码,不应该包含其他额外的功能,尤其是耗时任务。...生命周期五:didUpdateWidget 当组件的 configuration 发生变化时调用此函数,当父组件使用相同的 runtimeType 和 Widget.key 重新构建一个新的组件时,Framework...非常重要的几个概念 下面介绍几个非常重要的概念和方法,这些并不是生命周期的一部分,但是生命周期过程中的产物,与生命周期关系非常紧密。...setState setState 方法是开发者经常调用的方法,此方法调用后,组件的状态变为 dirty,当有数据要更新时,调用此方法。

    99410

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

    ,从而加深你对构建Flutter应用的关键概念和技术的理解。...setState方法是Flutter以数据驱动视图更新的函数,会通知Flutter框架:我这儿有状态改变,赶紧给我刷新界面!...而Flutter框架收到通知后,会执行Widget#build,根据新状态重建界面。 状态的更改一定要配合使用setState。...通过该方法调用,Flutter会在底层标记Widget的状态,随后触发重建。示例即使修改_counter,若不调用setState,Flutter框架也不会感知到状态变化,因此界面也不会有任何改变。...在这个函数中,通过调用setState更新_counter属性同时,也通知Flutter框架其状态发生变化。

    48120

    Flutter的生命周期

    Flutter的生命周期分为两个部分,一个是Flutter本身的组件的生命周期,一个是平台相关的生命周期。...调用 「deactivate」 之后,然后将 「State」 对象重新插入树的另一个位置。 此方法可以在每一帧中调用,此方法中应该只包含构建组件的代码,不应该包含其他额外的功能,尤其是耗时任务。...生命周期五:didUpdateWidget 当组件的 「configuration」 发生变化时调用此函数,当父组件使用相同的 「runtimeType」 和 「Widget.key」 重新构建一个新的组件时...非常重要的几个概念 下面介绍几个非常重要的概念和方法,这些并不是生命周期的一部分,但是生命周期过程中的产物,与生命周期关系非常紧密。...setState 「setState」 方法是开发者经常调用的方法,此方法调用后,组件的状态变为 「dirty」,当有数据要更新时,调用此方法。

    1.7K30

    干货 | 携程火车票Flutter最佳实践

    Flutter是由谷歌开源的跨平台框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。...二、 Provider对MVVM架构的实践 在Flutter的开发过程中,特别是一些业务复杂的页面,为了代码结构清晰,模块逻辑解耦,我们一般采用的是模块化的编程思想。...1)我们的业务代码更专注数据,只要更新Model,UI就会自动更新,不用在状态改变后再去手动调用setState()来显示更新页面。...当调用 setState() 时,RenderObject 就会往上的父节点去查找,根据 isRepaintBoundary是否为 true,会决定是否从这里开始往下去触发重绘,来确定要更新哪些区域。...收集了Flutter开发过程中常见并且大量发生的问题,并提供了相应的解决方案。 在复杂业务和长列表上面体验,确实 Flutter 优于 React Native。

    2.2K30

    Flutter入门三部曲(2) - 界面开发基础

    改变状态后,需要通过setState来重新构建widget,就是会重新调用build方法,来得到状态同步。...如果这个属性不是true的话,调用setState会报错。 注意:你可以在调用setState前,检查一下这个变量。...在此方法取消订阅并取消所有动画,流等 10. mounted is false state对象被移除了,如果调用setState,会抛出的错误。...后续过程中,一定要注意这个Context的使用。 注意:这里其实还有另外一个方法,来得到这个BuildContext。...[image.png] Flutter是受React启发的,所以Virtual Dom的diff算法也参考过来了(应该是略有修改),在diff的过程中如果节点有Key来比较的话,能够最大程度重用已有的节点

    2.6K00

    【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )

    animation.addListener ; setState 方法 : 动画如果生效, 必须在监听器中调用 setState 方法 , 以便重新调用 build 方法进行布局渲染 , 否则 UI..., 结尾不能有分号 /// 特别注意 : 动画如果生效, 必须在监听器中调用 setState 方法 ..addListener(() { /// 调用 setState...方法后, 更新相关状态值后, 自动调用 build 方法重构组件界面 setState(() { // 获取动画执行过程中的值 animationValue..., 结尾不能有分号 /// 特别注意 : 动画如果生效, 必须在监听器中调用 setState 方法 ..addListener(() { /// 调用 setState...方法后, 更新相关状态值后, 自动调用 build 方法重构组件界面 setState(() { // 获取动画执行过程中的值 animationValue

    1.4K40

    widget简介

    Flutter 从 React 中吸取灵感,通过现代化框架创建出精美的组件。它的核心思想是用 widget 来构建你的 UI 界面。Widget 描述了在当前的配置和状态下视图所应该呈现的样子。...在写应用的过程中,取决于是否需要管理状态,你通常会创建一个新的组件继承 StatelessWidget 或 StatefulWidget。...•createElement():正如前文所述“一个Widget可以对应多个Element”;Flutter Framework在构建UI树时,会先调用此方法生成对应节点的Element对象。...此方法是Flutter Framework隐式调用的,在我们开发过程中基本不会调用到。•debugFillProperties(...) 复写父类的方法,主要是设置诊断树的一些特性。...在 State 中,你可以动态改变数据,在 setState之后,改变的数据会触发 Widget 重新构建刷新,而下方代码中,是通过延两秒之后,让文本显示为 *"这就变了数值"*。

    1.4K20

    Widget的生命周期和渲染原理

    我们知道,在需要修改数据更新UI的时候,只要调用setState然后在其中更改数据,这样UI就可以随之改变了,这是因为setState函数可以触发widget的销毁重建,也就是会触发state的build...接下来我们看一下setState的源码: 可以看到,除了断言,这里面实际上就调用了一行代码: _element!....好,现在我们知道了通过setState来根据数据自动调整UI的原理了,因此,原则上我们是可以不调用setState而直接给element调用markNeedsBuild函数来实现UI的更新,即: 在StatefulWidget...Widget的渲染原理 关于Widget的渲染,我在Widget,构建Flutter界面的基石中有过介绍,本文也是依次为基准,再做一些拓展介绍。...StatefulElement; 在StatefulElement的构建函数中,调用了widget的createState函数来创建State,并且给创建出来的State对象的element和wiget

    1.3K20

    Flutter入门三部曲(2) - 界面开发基础

    改变状态后,需要通过setState来重新构建widget,就是会重新调用build方法,来得到状态同步。...如果这个属性不是true的话,调用setState会报错。 注意:你可以在调用setState前,检查一下这个变量。...在此方法取消订阅并取消所有动画,流等 10. mounted is false state对象被移除了,如果调用setState,会抛出的错误。...后续过程中,一定要注意这个Context的使用。 注意:这里其实还有另外一个方法,来得到这个BuildContext。...image.png Flutter是受React启发的,所以Virtual Dom的diff算法也参考过来了(应该是略有修改),在diff的过程中如果节点有Key来比较的话,能够最大程度重用已有的节点

    1.6K20

    Flutter跨平台移动端开发丨Widget、Element、State、状态管理

    目录 Widget Element State 状态管理 ---- Widget 的概念 widget 的主要工作是通过实现 build 函数 来构建自身。...一个 widget 通常由一些低级别的 widget 组成,flutter 框架依次的构建这些低级别的 widget,直到构建到最底层的子 widget 时,它会计算并描述 widget 的几何形状 flutter...StatelessWidget:无状态,比如标题栏中的标题 StatefulWidget:有状态,创建时需要指定一个 State ,在需要更新 UI时调用 setState(VoidCallbackfn...要维护的状态,保存的状态信息可以在 build 时被获取,同时,在 widget 生命周期中可以被改变,改变发生时,可以调用其 setState() 方法通知 framework 发生改变,framework...context 属性是 buildContext 类的实例,表示构建 widget 的上下文,每个 widget 都有一个自己的 context 对象,它包含了查找、遍历当前 widget 树的方法。

    1.8K50

    Flutter 应用性能优化最佳实践

    以下文章来源于Flutter社区,作者talisk 通常来说,Flutter 技术构建的应用程序在默认情况下都是高性能的。...把他们分拆成不同的 Widget,并进行封装,另外他们要这样改变: 当在 State 上调用 setState()时,所有后代 Widget 都将重建。...因此,将 setState() 的调用转移到其 UI 实际需要更改的 Widget 子树部分。...如果改变的部分仅包含在 Widget 树的一小部分中,请避免在 Widget 树的更高层级中调用 setState()。 当重新遇到与前一帧相同的子 Widget 实例时,将停止遍历。...这种技术在框架内部大量使用,用于优化动画不影响子树的动画。请参阅 TransitionBuilder 模式和使用此原则的 SlideTransition,以避免在动画过程中重建其后代 Widget。

    2.4K20
    领券