在构建过程中调用的setState()或markNeedsBuild() -何时设置从API获取的变量的值？ - 腾讯云开发者社区

这个系列便是对 Flutter 绘制的探索，通过测试、调试及源码分析来给出一些在绘制时被忽略或从未知晓的东西，而有些要点如果被忽略，就很可能出现问题。...在第一篇也说过，对于有滑动或动画需求的绘制，重建触发的频率非常大，此时即使对象是轻量的，也会在短时间内创建大量对象，这样不是很好。...现在也就是即将调用这个 Element 对象的 markNeedsBuild() 方法。 ? ---- 下一步就会进入 Element.markNeedsBuild，也就是 Element 类中。...这里的返回值是为了更新 this 节点的 _child 属性，也就是更新第三元素节点当 newWidget 为 null 时，会返回 null，且 child 不为 null 时，会被从树上移除。...这就是在 setState 时进行的 Element 重新构建和 RenderObject 的更新。

1.7K2 0

StatefulWidget与State

，或热重载时，系统会回调该方法 void didUpdateWidget(covariant T oldWidget) {}//重新载入 void reassemble() {}//设置界面数据变更...运行中：在渲染树中存在，这一阶段涉及的生命周期函数主要有didUpdateWidget和build。销毁：从渲染树中移除，此阶段涉及的生命周期函数主要有deactivate和dispose。...调用Element的markNeedsBuild方法上面的1-5步流程都非常的简单，在第6步调用markNeedsBuild方法。...在最后标记当前_dirty为true，并且调用scheduleBuildFor来重新构建Wdiget。...小结 StatefulWidget是由状态组建，我们可以使用setState方法来重新构建组建 StatefulWidget的Wdiget是通过State的Build方法构建的 setState方法将要重新构建的

1.3K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

Flutter的setState更新原理和流程

也就是只有当我们的类是有状态类的时候才能进行状态刷新，setState也是在State（有状态类）类里解析：framework.dart文件State类调用 setState() 必须是没有调用过..._element.markNeedsBuild(); } setState方法除了一些条件判断就是：_element.markNeedsBuild();那我们看看markNeedsBuild。...if (dirty) return; // 设置`_dirty = true ` _dirty = true; //调用scheduleBuildFor方法..._active=false 的时候直接返回管理类 1.告诉管理类方法自己需要被重新构建： owner.scheduleBuildFor(this) 调用 window.scheduleFrame()...等待下一次vsync信号的到来，然后再经过层层调用最终会调用到 Window::BeginFrame() UI 的绘制逻辑是在 Render 树中实现的更新帧信号来临从而刷新需要重构的界面在 drawFrame

7262 0

Widget的生命周期和渲染原理

其实，所谓的生命周期，就是一系列的方法回调，我们可以通过实现这些方法来捕获一个widget从加载到卸载全过程中的各个节点，以在合适的时机做合适的事情。那么我们可以利用生命周期方法做哪些事情呢？...我们知道，在需要修改数据更新UI的时候，只要调用setState然后在其中更改数据，这样UI就可以随之改变了，这是因为setState函数可以触发widget的销毁重建，也就是会触发state的build...好，现在我们知道了通过setState来根据数据自动调整UI的原理了，因此，原则上我们是可以不调用setState而直接给element调用markNeedsBuild函数来实现UI的更新，即：在StatefulWidget...：调用widget中的createState函数创建State对象；将widget和element赋值给State对象的相关属性，这样就可以在StatefulWidget对应的State里面获取到...StatefulElement；在StatefulElement的构建函数中，调用了widget的createState函数来创建State，并且给创建出来的State对象的element和wiget

1.2K2 0

Flutter | 启动，渲染，setState 流程

组件树在构建完毕后，回到 runApp 的实现中，当调完 attachRootWidget 后，最后一行会调用 WidgetsFlutterBainding 实例的 scheduleWarmUpFrame...，这可以保证在绘制过程中不会触发新的重绘。..._inDirtyList = true; } 复制代码当调用 setState 后： 1，首先调用 markNeedsBuild 方法，将 element 的 dirty 标记为 true，表示需要重建...如果为 false，该字段值初始值默认就是 false，接着判断 onBuildScheduled 不为 null，其实 onBuildScheduled 在 WidgetBinding初始化的时候就已经创建了...上屏，会将绘制出的bit数据发送给GPU .....///// } } 复制代码以上，便是 setState 调用的大概过程，实际的流程会更加复杂一点，例如在这个过程中不允许再次调用 setState

1.1K1 0

Flutter 组件集录 | InheritedNotifier 内置状态管理组件

并通过一个简单的模拟下载进度案例，介绍了它的使用方式：案例演示监听-通知关系上一节通过全局变量来维护 ProgressValueNotifier 类型的 progress 对象，让它可以在代码中的任何位置被访问到...可以看到 DetailProgressView 此时可以是 StatelessWidget , 但依然会被通知，从而重新构建。这是一种非 State#setState 更新状态的方式。...:使用了 of 获取数据的组件，在可监听对象发生通知时会触发重新构建。...了解 Flutter 框架的都知道 State#setState 本质上也就是触发了持有 Element 的 markNeedsBuild 方法。...如下所示，此时其中是 HomeProgressView 对应的元素：也就是说，接下来 HomeProgressView 对应的元素触发 didChangeDependencies，其中调用了 markNeedsBuild

2112 0

【源码篇】Flutter Provider的另一面（万字图文+插件）

的text值，然后在TextField数据框里的数据也及时改变了，其实最后还是用到setState。..., ); } } _InheritedProviderScope 这里是继承了InheritedWidget，里面重写createElement方法，在构建Widget的时候，这个方法是肯定会被调用的...然后获取到了 _delegate变量 _delegate这个变量是在InheritedProvider类中的实例化 _CreateInheritedProvider赋值给他的，不信的话，可以返回去看看...，给element赋值了，element = this 所以在_CreateInheritedProviderState类中，可以随便使用element 这个变量，他的值肯定不为空！...dispose 流程调用startListening方法时，该方法会返回一个移除监听Function 移除监听的Function在dispose时被调用，移除给XxxProvider添加的监听从外部传入的

1.3K6 1

Flutter | 一文搞懂 BuildContext

as Element).markNeedsBuild(); 复制代码这样就可以直接对当前的 Element 进行刷新，而不必去通过 SetState，但是这种做法是极其的不推荐的。...其实在 SetState 中，最终也是调用的 markNeedsBuild 方法，如下： void setState(VoidCallback fn) { assert(fn !...markNeedsBuild(); } 复制代码我们在写代码的过程中还会发现一个问题，就是要更新的状态不是必须要写在 setState 里面，只要写在 setState 上面即可，这样也没有问题，...但是最后发现了这个问题的弊端了，如大多数人会在每个方法的后面加一个 setState，导致过度的开销，并且在删除的时候也是不知道这个这个 setState 到底有没有实际的意义，这就会造成一些不必要的麻烦...所以 Flutter 在 setState 中加了一个回调，我们可以需要更新的状态直接放在回调里面，和状态没关系的放在外边即可。

5033 0

flutter源码：setState分析

setState方法算是flutter使用最频繁的方法了，每次页面数据有改变，都需要调用这个方法，去触发页面的刷新，展示最新的UI效果，接下来从源码角度解读下setState后具体发生了什么系统源码部分...markNeedsBuild(); } 上面可以看到，回调方法VoidCallback fn是马上会被同步执行，然后调用这个widget对应的element的markNeedsBuild方法 void...scheduleBuildFor(this); } 就是把这个element标记为dirty，如果已经标记过，则忽略，说明连续调用两次setState方法，第二次其实是多余的，然后是调用owner...的scheduleBuildFor方法这里的owner，是BuildOwner，先记住全局只有一个BuildOwner实例，它是在启动的时候创建的，这里先不展开说明，我们先记住全局就一个owner就好...finish(); // end the Frame }()); _currentFrameTimeStamp = null; } } 这个方法有点长，widget的回调其实是在

4221 0

Flutter完整开发实战详解(十五、全面理解State与Provider)

如下图所示，StatefulWidget 的 createState 是在 StatefulElement 的构建方法里创建的，这就保证了只要 Element 不被重新创建，State 就一直被复用...我们先看问题代码，如下图所示： 1、在 _DemoAppState 中，我们创建了 DemoPage , 并且把 data 变量赋给了它。...问题就在于前面 StatefulElement 的构建方法和 update 方法： State 只在 StatefulElement 的构建方法中创建，当我们调用 setState 触发 update...我们常说的 setState ，其实是调用了 markNeedsBuild ，markNeedsBuild 内部会标记 element 为 diry，然后在下一帧 WidgetsBinding.drawFrame...listener 内会调用 StateDelegate 的 StateSetter 方法，从而调用到 StatefulWidget 的 setState。

3.5K2 1

Flutter进阶-Key之GlobalKey

我们这不做深入讨论，只需要知道在element树构建中是会将owner传递，即共享一个owner对象。...实现原理：在开始探索原理之前，我们需要明白setState的流程，我们简单过一下，在setState之后，会将当前widget（MyHomePage）markNeedsBuild，markNeedsBuild...递归child更新，RenderObjectElement则是更新RenderObject，如果是带child或children的RenderObjectElement最终也会调用到updateChild...答案是有的，在inflateWidget递归构建新的element树时，会判断widget key是否是GlobalKey，是的话尝试调用_retakeInactiveElement，_retakeInactiveElement...总结一下，上面我们主要介绍了GlobalKey的两种应用场景及原理：可以在app的任何地方更换父widget而不会丢失状态它可以用来从完全不同的widget树里面访问数据下一篇文章，我们将继续探索

1.6K2 0

【 Flutter 极限测试】连续 1000000 次 setState 会怎么样

测试描述可能很多人会认为，每次的 State#setState 都会触发当前状态类的 build 方法重新构建。但真的是这样吗，你真的了解 Flutter 界面的更新流程吗?...源码调试分析如下，在 State#setState 源码中可以看出，它只做了两件事：触发入参回调 fn 。执行持有元素的 markNeedsBuild 方法。...在 Elememt#markNeedsBuild 方法中没有一个非常重要的判断，那就是下面 4440 行中，如果 dirty 已经是 true 时，则直接返回，不会执行接下来的方法。...总的来说， State#setState 的核心作用就是把持有的元素标脏并申请新帧调度。而只有新帧到来，执行完构建之后，元素的 dirty 才会置为 false 。...也就是说，两帧之间，无论调用多少次 setState ，都只会触发一次，元素标脏和申请新帧调度。这就是为什么连续触发 1000000 次，并无大事发生的原因。

6043 0

Flutter框架分析（四）-- Flutter框架的运行

; _element.markNeedsBuild(); } 这里会调用到Element的markNeedsBuild()函数。...它的实例是在WidgetsBinding初始化的时候构建的。...渲染流水线的构建（build），布局（layout）和绘制（paint）阶段都是在其中一个回调里的。 “Post-Frame”回调主要是在新帧渲染完成以后的一类调用，此类回调只会被调用一次。...之前在讲Element的时候我们介绍过updateChild()这个函数。由增，删，改这么几种情况，对于MyWidget，从State.setState()过来是属于改的情况。...可见构建（build）过程是从需要重建的Element节点开始一层层向下逐个更新子节点。直到遇到叶子节点为止。至此渲染流水线的构建（build）阶段就跑完了。

8104 0

Flutter学习之构建、布局及绘制三部曲

构建初次构建 flutter的入口main方法直接调用了runApp(Widget app)方法,app参数就是我们的根视图的Widget，我们直接跟进runApp方法 void runApp(...通过setState触发构建通常我们在应用中要更新状态都是通过State中的setState方法来触发界面重绘，setState方法就是先调用了callback让后调用该State的Element对象的...markNeedsBuild方法，markNeedsBuild中将Element标记为dirty并通过BuildOwner将其添加到dirty列表中并调用onBuildScheduled回调（在WidgetsBinding...初始化时设置的，它回去调用window.scheduleFrame方法），让后window的onBeginFrame，onDrawFrame回调（在SchedulerBinding初始化时设置的，这两个回调会执行一些...childParentData的offset值（这个值是相对于parent的绘制偏移值，在paint的时候传入这个偏移值） size = constraints.constrain(Size(//将constraints

9571 0

Flutter框架分析（三）-- Widget，Element和RenderObject

如果当前State不是在mounted == true的状态，你去调用setState()是会crash的。函数initState()用来初始化State。...所以建议大家在调用setState()之前用mounted判断一下。另外要注意的一点是，这个函数也是触发渲染流水线的一个点。...函数deactivate()在State对应的Element被从树中移除后调用，这个移除可能是暂时移除。...在InheritedWidget之下的子节点都可以通过调用BuildContext.inheritFromWidgetOfExactType()来获取这个InheritedWidget。...函数rebuild()在渲染流水线的构建（build）阶段被调用。具体的重建在函数performRebuild()中，由Element子类实现。

1.2K1 0

flutter Toast实现消息提示框

使用方法 //默认是显示在中间的 Toast.toast(context,msg: "中间显示的 "); Toast.toast(context,msg: "中间显示的 ",position...//通过OverlayEntry将构建的布局插入到整个布局的最上层 _overlayEntry = OverlayEntry( builder: (BuildContext context) = Positioned...( //top值，可以改变这个值来改变toast在屏幕中的位置 top: buildToastPosition(context), child: Container( alignment: Alignment.center...overlayState.insert(_overlayEntry); } else { //重新绘制UI，类似setState _overlayEntry.markNeedsBuild(); } /...), child: Text( _msg, style: TextStyle( fontSize: _textSize, color: _textColor, ), ), ), ), ); } // 设置

2.7K2 0

Flutter(六)--有状态的组件StatefulWidget&StateFlutter(六)--有状态的组件StatefulWidget&State

返回值是一个Diagnosticable的拓展抽象类State @protected State createState(); //Diagnosticable是基类--继承自Object...//各种异常判断略过 _element.markNeedsBuild(); } //在调用setState之后会调用didUpdateWidget方法进行更新,真正的组件更新在此方法中进行...//更新完成后通知其他被标记的组件继续更新 onBuildScheduled(); } //在组件更新的时候系统会调用一个update方法； // //在此方法中didUpdateWidget...在setState后创建新的newWidget，但State是复用。...销毁（从渲染树种移除）传送门: Flutter-汇总

7782 0

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

同时最好复写dispose()和notifyListeners()方法，防止用户在调用数据时销毁界面，而等到数据获取到以后通知界面刷新导致Crash。...1）我们的业务代码更专注数据，只要更新Model，UI就会自动更新，不用在状态改变后再去手动调用setState()来显示更新页面。...### 开启Profile模式 TRIP_FLUTTER_PROFILE=true ### 设置profile模式下js使用的产物目录（过程1构建的 ....点击上面图中的箭头所指的按钮，就会在手机或模拟器中打开（如下图所示）。FPS是一个动态过程，页面滑动这个值是一直变化的，最右边的是当前帧。..._showCountDown = true; }); } } catch (e) {} } 3）处理办法在调用setState()方法之前检查是否mounted

2.1K3 0

Flutter(九)--Flutter中Widget刷新逻辑+源码解读Flutter(九)--Flutter中Widget刷新逻辑+源码解读

final dynamic result = fn() as dynamic; _element.markNeedsBuild(); } } //在Element类中 { void...markNeedsBuild() { ......目前没找到调用的位置。经过一系列调用，最终会到达到updateChild这个方法里，目前为止当前包含当前Widget的Element就会进入到updateChild更新流程里。...在StatelessElement中并没有找到setState等刷新方法，所以无法支持刷新，回答了之前的问题一。...通过调试发现widget的对比是通过widget的hash值来进行的，所以任何改动都会导致hash值不同。

1K2 0

Flutter 的 runApp 与三棵树诞生流程源码分析

Flutter 第一行程序开始我们就知道在 Dart 的 main 方法中通过调用 runApp 方法把自己编写的 Widget 传递进去，只有这样编译运行后才能得到预期效果。...* 多次重复调用runApp将会从屏幕上移除已添加的app Widget并添加新的上去， * 框架会对新的Widget树与之前的Widget树进行比较，并将任何差异应用于底层渲染树，有点类似于StatefulWidget...调用State.setState后的重建机制。...(element == null) { //9、在lockState里面代码执行过程中禁止调用setState方法 owner.lockState(() { /...>），在 Element 进行 mount 时通过调用 Widget 树（RenderObjectToWidgetAdapter）的createRenderObject方法获取 RenderObjectToWidgetAdapter

8450 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Flutter 绘制探索 4 | 深入分析 setState 重建和更新 | 七日打卡

StatefulWidget与State

Flutter的setState更新原理和流程

Widget的生命周期和渲染原理

Flutter | 启动，渲染，setState 流程

Flutter 组件集录 | InheritedNotifier 内置状态管理组件

【源码篇】Flutter Provider的另一面（万字图文+插件）

Flutter | 一文搞懂 BuildContext

flutter源码：setState分析

Flutter完整开发实战详解(十五、全面理解State与Provider)

Flutter进阶-Key之GlobalKey

【 Flutter 极限测试】连续 1000000 次 setState 会怎么样

Flutter框架分析（四）-- Flutter框架的运行

Flutter学习之构建、布局及绘制三部曲

Flutter框架分析（三）-- Widget，Element和RenderObject

flutter Toast实现消息提示框

Flutter(六)--有状态的组件StatefulWidget&StateFlutter(六)--有状态的组件StatefulWidget&State

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

Flutter(九)--Flutter中Widget刷新逻辑+源码解读Flutter(九)--Flutter中Widget刷新逻辑+源码解读

Flutter 的 runApp 与三棵树诞生流程源码分析

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐