StatefulWidget的场景已经完全覆盖了StatelessWidget，因此我们在构建界面时，往往会大量使用StatefulWidget来处理静态的视图展示需求，看起来似乎也没什么问题。...StatefulWidget是否是Flutter中的万金油？在今天这篇文章中，我将着重介绍这两种类型的区别，从而帮我们更好地理解Widget，掌握不同类型Widget的正确使用时机。...第一个例子是，我需要创建一个自定义的弹窗控件，把使用App过程中出现的一些错误信息提示给用户。...那么，这意味着什么呢？ 如果我们的根布局是一个StatefulWidget，在其State中每调用一次更新UI，都将是一整个页面所有Widget的销毁和重建。...这里你可能会有疑问，如果我在一个默认不可变的场景下使用StatefulWidget，那么我肯定不会主动调用其setState方法啊，如果我不主动调用setState，那么不就不会影响StatefulWidget
比如，如果从树中删除一个StatefulWidget，稍后再次将其插入到树中，Flutter将再次调用StatefulWidget.createState 来创建一个新的 State对象。...这个新创建的State对象会和一个BuildContext相关联.注意这个关联关系是永久性的，不会发生变化的。虽然关联关系不会发生变化，但是BuildContext本身是可以在树上进行移动的。...什么时候会去调用这个方法呢？根据flutter的说法，当State依赖的对象发生变化的时候就会调用。...除了State主动调用setState方法之外，还有一些外部的变动会导致State的变动，比如：void didUpdateWidget(covariant T oldWidget) { }这个方法什么时候会被调用呢...如果是在开发过程中，flutter还支持热重载，这时候会调用state的reassemble方法：void reassemble() { }flutter框架会在触发热重载之后，调用build方法，所以一般来说
目录概述 什么是Widget? 在Flutter的世界中，一切都是Widget，即一切都是组件 why? 为什么一切都是组件，怎么理解呢？...按照传统的 Android 开发思想，在Android中，ui组件就是普通的一个组件，我声明什么显示什么，所见即所得, 而在Flutter中，widget 不仅可以表示ui 组件，也可以表示一些功能性组件...setState会导致整个widget全部重建，所以在使用时，我们应该尽量把 子widget 抽离出去，采用局部刷新的方式优化，当然这个技巧具体可以百度或者参阅我之前的代码，并不是什么骚操作，基本入门技巧吧...widget 示例在重新构建时可能会变化，但 State 实例只会在第一次插入到树中时被创建，当在重新构建时，如果 widget 被修改了，Flutter framework 会动态设置State,...需要注意的是：GlobalKey开销较大，如果有其他可选方案，应尽量避免使用它，另外同一个 GlobalKey 在整个 widget树中必须是唯一，不能重复。
Widget的生命周期 关于生命周期，我之前写过一篇文章总结过：提到生命周期，我们是在说什么？今天这个篇幅是以此文章为基准，再做一些补充。...我下面可以稍微罗列一下： 内存管理相关，比如销毁数据、销毁监听者、销毁timer 初始化数据，比如发送网络请求，创建一些数据等 一般而言，Flutter的widget分为StatefulWidget和...由于State对象在视图渲染树中的位置发生了变化，因此需要暂时移除之后再重新添加，此时就会触发deactive。...Widget的渲染原理 关于Widget的渲染，我在Widget，构建Flutter界面的基石中有过介绍，本文也是依次为基准，再做一些拓展介绍。...接下来看下ComponentElement的源码： 可以看到，在ComponentElement的mount函数中，除去断言之外，只做了一件事情，就是调用_firstBuild();，然后我们一层一层点进去
创建后我们可以看到main.dart，这里是flutter启动文件，同时我启动了一个模拟器，用的雷电模拟器，至于为什么不用AS自带的模拟器，只能说懂的都懂，不懂的也劝你别去用。 ...运行好了，效果如下图所示： 当我们点击右下角的浮动按钮之后就会看到屏幕中的数字加1，关于这个里面的内容我在第一篇Flutter文章中就介绍过了，因此下面我们就不过多介绍代码，我们将main.dart...UI，现在我们就了解了无状态和有状态两种组件，在 Flutter 中，有两种类型的小部件：StatelessWidget 和 StatefulWidget。...它们在功能和使用上有一些区别。 StatelessWidget（无状态小部件）： 它是一个不可变的小部件，意味着一旦创建就不能再更改它的状态。...在实践中，以下是一些使用场景的示例： 使用 StatelessWidget：当小部件的外观和内容不会随时间而改变时，推荐使用 StatelessWidget，例如静态文本、图标等。
) {}//界面更新，Widget 的配置发生变化时，或热重载时，系统会回调该方法 void didUpdateWidget(covariant T oldWidget) {}//重新载入 void...，Flutter 会回调该方法，随后触发组件构建。...方法中做一些初始化工作，然后在dispose方法中做一些销毁工作。...setState如何触发界面变更 在前面很多例子中我们多次使用到setState方法，来更新Element中的数据，每次当每次数据变更时我们触发setState方法，紧接着界面就跟着变化了，大家应该都知道这是...在开始了解setState方法之前我们还需要来了解下一个枚举类_StateLifecycle，它是flutter中的一个私有类，用来表示State的生命周期。
下面的文章，将带领大家梳理Flutter中的数据流向，掌握Flutter的状态管理方案。 开篇 要管理Widget的数据、状态，首先要了解下，在Flutter中有哪些需要管理数据的场景。...一般来说，数据管理有两个场景： 同页面跨Widget数据管理 跨页面数据管理 Flutter在同一个Page中，可能存在很多的不同的Widget，这些Widget都在同一个Page层级之下，当某个Widget...的确可以，但是有个问题，如果页面里面有100个Widget，数据发生改变后，只有一个Widget需要接受这个改变，修改自己的UI，但是在这个StatefulWidget中，由于调用了setState函数...'), SubtitleWidget('在需要响应的Widget中addListener之后，一旦ValueNotifier的值发生改变，就会触发通知'), NotifierWidget...但是大家有没有发现，在使用ValueNotifier的时候，是有些冗余的，就好像前面用到的NotifierWidget，实际上大部分的ValueNotifier都需要这样配合使用，所以，Flutter也提供了这样一个类似的
1 往期回顾 从零开始的 Flutter 之旅: StatelessWidget 在之前的文章中，我们介绍了 StatelessWidget 的特性与它在 Flutter 中的呈现原理。...这次我们接着来聊聊它的兄弟 StatefulWidget，俗称有状态小部件。 2特性 如果你看了我之前的文章，你可能已经非常熟悉无状态小部件 StatelessWidget。...不可变的东西我是非常喜欢的，就像写代码一样，一旦定义了一个不可变的变量，我就不用再关心它之后的所有事情，因为它不可变的性质，致使它不会发生不可预期的问题，只需直接使用它即可。...方法中的布局，找到上述情况关联的 ui，在 ListView 的 item 中。...但就这样改变你会发现 ui 是不会刷新的，因为在 StatefulWidget，如果你想改变某个值，同时要同步更新 ui，需要使用 setState 方法。
为什么 build 方法放在 State 中而不是在 StatefulWidget 中呢？其中前2点是源代码的注释中给出的原因，最后一点是我的一点个人理解。...试想一下，如果 build 方法放在 StatefulWidget 中，则 AnimatedWidget 中的 build 方法需要带一个 State 参数,如下： abstract class AnimatedWidget...闭包 this 指向异常 假设 build 方法在 StatefulWidget 中，StatefulWidget 的子类写法如下： class MyWidget extends StatefulWidget...如果 build 方法在 State 中，代码如下： class MyWidget extends StatefulWidget { final Color color; const MyWidget...性能 有状态的组件包含StatefulWidget 和 State，当有状态组件的配置发生更改时，StatefulWidget 将会被丢弃并重建，而 State 不会重建，框架会更新 State 对象中
Key用来干嘛 Flutter中的Key，一直都是作为一个可选参数在很多Widget中出现，那么它到底有什么用，它到底怎么用，本篇文章将带你从头到尾，好好理解下，Flutter中的Key。...问题1 这时候，如果我们在代码中交换两个Container的位置，Hot reload之后，它们的位置会发生改变吗？...问题2 这时候，如果我们在代码中交换两个Container的位置，Hot reload之后，它们的数字会发生改变吗？...问题2的原因 所以，在问题2中，由于两个Widget的类型并没有发生变化，而又没有Key，所以，Widget被重新创建后，与原来的Element又关联起来了，看上去就是只修改了颜色。...❝但是要注意的是，如果类型不一致，那么Flutter会直接判断不相同，从而直接消耗重建，所以，在这些问题里，如果在KeyBox之间插上一些不同类型的Widget，那么就瞬间破防了，演示的效果就完全不同了
在 Flutter 中一切皆 组件，而组件又分为 StatefulWidget（有状态） 和 **StatelessWidget（无状态）**组件 ，他们之间的区别是 StatelessWidget 组件发生变化时必须重新创建新的实例...当 StatefulWidget 组件插入到组件树中时 createState 函数由 Framework 调用，此函数在树中给定的位置为此组件创建 State，如果在组件树的不同位置都插入了此组件，即创建了多个此组件...build，需要重写此方法的场景是：依赖发生变化时需要做一些耗时任务，比如网络请求数据。...此方法可以在每一帧中调用，此方法中应该只包含构建组件的代码，不应该包含其他额外的功能，尤其是耗时任务。...为什么要加上如此判断？因为如果当前组件未插入到树中或者已经从树中移除时，调用 setState 会抛出异常，加上 mounted 判断，则表示当前组件在树中。
Flutter中Widget刷新逻辑+源码解读 前言 我们都知道StatefulWidget可以进行页面刷新操作，而StatelessWidget并不具备这项功能，依旧在最开始抛出两个问题: 为什么只有..._dirty这个参数的使用，我认为是非常优化的。即使你做出重复刷新的操作也不会导致页面的重复刷新。...updateChild这个方法没有什么好说的，只是在canUpdate中发现如果不使用key，导致这个判断oldWidget.key == newWidget.key默认为true。...如果不想要进行复用的Widget则使用不同的key就可以实现。 update要注意方法中的_widget = newWidget，更新后会持有newWidget。...在这两部分的源码阅读发现，如果带着问题去阅读源码，不仅可以快速找到问题的原因；还能提高源码的阅读速度，因为可以排除一些无关的方法，不会毫无头绪。值得推荐。 传送门: Flutter-汇总
StatelessWidget是不可变的，一旦创建则无需更新；对于StatefulWidget来说，在State类中调用setState方法更新数据，会触发视图的销毁和重建，也将间接触发每个子Widget...因此StatefulWidget并不是万金油，我们在实际开发中，要正确审视自己的视图展示需求，避免无谓的StatefulWidget使用，这是提高页面渲染效率最简单也最直接的手段。...接下来，我和你分析一下这三个方法分别在什么场景下调用。 setState：我们最熟悉的方法之一。...当状态数据发生变化时，我们总是通过调用这个方法告诉Flutter：“我这儿的数据变啦，请使用更新后的数据重建UI！”...其实，在Flutter中实现同样的需求更简单：依然使用万能的WidgetsBinding来实现。
在这篇文章中，将带着大家一起认识什么是StatelessWidget？，什么是StatefulWidget？，以及StatefulWidget和StatelessWidget都有哪些最佳实践？...状态是在构建widget时可以同步读取的信息，或者在widget的生命周期中可能更改的信息，在Flutter中如果要管理状态需要用到 StatefulWidget。...发生变化时 什么是StatefulWidget？...调用setState告诉Flutter框架，某个状态发生了变化，Flutter会重新运行build方法，以便应用程序可以应用最新状态。...确定widget应该使用StatefulWidget还是StatelessWidget 在Flutter中，widget是有状态的还是无状态的 - 取决于是否 他们依赖于状态的变化 如果用户交互或数据改变导致
Flutter的理念是一切都是Widget(Everythin is Widget)。开发者在开发Flutter app的时候主要都是在写很多Widget。那么这三者之间是什么关系？...如果当前State不是在mounted == true的状态，你去调用setState()是会crash的。 函数initState()用来初始化State。...函数didChangeDependencies()，State的依赖发生变化的时候被调用，具体什么样的依赖后文再说。..._slot由父Element设置，目的是告诉当前Element在父节点的什么位置。由于Element基类不知道子类会如何管理孩子节点。所以函数visitChildren()由子类实现以遍历孩子节点。...Flutter的渲染流水线中的构建（build）阶段主要就是在维护更新element tree里面的Element节点。
本文示例代码 概述 响应式的编程框架中都有一个永恒的主题 "状态管理"，无论是在 React/Vue 还是在Flutter中，他们的问题和解决的思想都是一致的 额........也就是说，当状态发生变化的时候，页面也会随之刷新， 个人理解：响应式编程解决的就是数据一致性的问题。...保证在状态发生改变之后，可以立即同步到页面中； Flutter 中的状态管理 在 Flutter 中，StatefulWidget 的状态应该被谁管理？ Widget 本身？...有些时候，如果不确定到底应该怎么管理，那么首选的应该是在父 Widget 中管理。...方法中订阅语言改变事件，当用户切换语言之后，订阅此事件的组件就会收到通知，收到通知后重新 setState 即可 2，使用一些专门用于状态管理的包，如 Provider，Redux 等，具体的使用可上
createElement()：正如前文所述，一个 Widget 可以对应多个 Element，Flutter Framework 在构建 UI 树时，会先调用此方法生成对应节点的 Element 对象...，但是 State 类中持有的状态在 widget 生命周期中可能会发生变化 abstract class StatefulWidget extends Widget { const StatefulWidget...Widget 第一次插入到树中 Widget 时调用，对于每一个 State 对象，Flutter framework 只会调用一次该回调，所以通常在该回调中做一些一次性的操作，如状态初始化，订阅子树的时间通知等...在一些场景下，Flutter framework 会将 State 对象重新插入到树中，如果包含次 State 对象的子树在树的一个位置移动到另一个位置时(可以通过 GlobalKey 来实现)。...StatefulWidget 的具体逻辑都在其 State 中，所有很多时候，我们都需要获取 StatefulWidget 对应的 State 对象来调用一些方法，对此，我们有两种方法在子 widget
当 StatefulWidget 组件插入到组件树中时 「createState」 函数由 「Framework」 调用，此函数在树中给定的位置为此组件创建 「State」，如果在组件树的不同位置都插入了此组件...在 「initState」 中订阅通知。 在 「didUpdateWidget」 中，如果需要替换旧组件，则在旧对象中取消订阅，并在新对象中订阅通知。 并在 「dispose」 中取消订阅。...「build」，需要重写此方法的场景是：依赖发生变化时需要做一些耗时任务，比如网络请求数据。...此方法可以在每一帧中调用，此方法中应该只包含构建组件的代码，不应该包含其他额外的功能，尤其是耗时任务。...❞ 为什么要加上如此判断？因为如果当前组件未插入到树中或者已经从树中移除时，调用 「setState」 会抛出异常，加上 「mounted」 判断，则表示当前组件在树中。
前面我只提到了很零星的一些关于代码部分的内容，现在是时候揭开它的神秘面纱了。 不知大家是否还记得之前的创建flutter项目的命令？...02 - runApp runApp 是 flutter 的入口函数，所以如果要使用的话那就必须调用 runApp 才能启动 flutter 项目，不然的话就会报错了。...当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改（译者语：类似于React/Vue中虚拟DOM的...由于 StatelessWidget 和 StatefulWidget 都是 Widget 的抽象类。所以我们在使用的时候就需要重写 Widget 类来实现具体的代码和逻辑。...我没有打错字，因为对代码的渲染结构进行了更改，所以需要使用 R） 什么？你居然不知道 R 键什么意思？那你现在还不立刻马上赶紧回去复习？！！ 什么？你居然还分不清 r 和 R 的区别？！！
强烈建议：在组件前加上 const 在组件前加上 const ，相当于对此组件进行了缓存，下面是未加 const 的代码： class ConstDemo extends StatefulWidget...上面的情况组件树发生了更改，不管是类型发生更改，还是深度发生更改，如果无法避免，那么就将变化的组件树封装为一个 StatefulWidget 组件，且设置 GlobalKey，如下： 封装变化的部分：...部分组件一定要谨慎使用，因为这些组件包含一些昂贵的操作，比如 saveLayer() 方法。...将内容绘制到屏幕外缓冲区中可能会触发渲染目标切换，这在较早的GPU中特别慢。 另外虽然下面这些组件比较消耗性能，但并不是禁止大家使用，而是谨慎使用，如果有替代方案，考虑使用替代方法。...还有一些组件也要慎重使用，比如： ShaderMask ColorFilter BackdropFilter 文中如果有不完善或者不正确的地方欢迎提出意见，后面如果优化的补充将会在我的博客（精彩文章目录下
领取专属 10元无门槛券
手把手带您无忧上云
