文档建议反馈控制台
首页
学习
活动
专区
工具
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()

72920

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.4K00
您找到你想要的搜索结果了吗？
是的
没有找到

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

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

2.4K41

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

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

96020

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

80020

Flutter | 启动，渲染，setState 流程

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

1.1K10

Stateful 组件的生命周期​

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

96310

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

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

35520

Flutter的生命周期

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

1.6K30

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

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

2.1K30

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.3K40

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.2K20

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为什么会分为StatefulWidget 与 StatelessWidget ？

这是因为 Widget 需要依据数据才能完成构建，而对于 StatefulWidget 来说，其依赖的数据在 Widget 生命周期中可能会频繁地发生变化。...setState 方法是 Flutter 以数据驱动视图更新的关键函数，它会通知 Flutter 框架：我这儿有状态发生了改变，赶紧给我刷新界面吧。...而 Flutter 框架收到通知后，会执行 Widget 的 build 方法，根据新的状态重新构建界面。 状态的更改一定要配合使用 setState。...通过这个方法的调用，Flutter 会在底层标记 Widget 的状态，随后触发重建。...于我们的示例而言，即使你修改了 _counter，如果不调用 setState，Flutter 框架也不会感知到状态的变化，因此界面上也不会有任何改变 image.png Flutter 对这个机制做了优化

96410
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券