Flutter小部件的生命周期，小部件树和元素树。
照片：Artur ShamsutdinovonUnsplash
目录。
⦿什么是widget？
🎯⦿Widget生命周期
🧬⦿Widget、元素和渲染对象树
🌲⦿如何检查Flutter应用程序的Widget树🔍
什么是Widget？🎯
小部件是Flutter应用程序的构建块。它们是UI的不同部分的配置。小组件可以是结构元素、输入元素、用户界面布局、互动元素、动画、资产、图像、图标和您可以自己创建的自定义小组件!
在flutter中，有两种类型的widget
- 无状态小部件。无状态Widget是基于它自己的配置建立的，不会动态变化。
- 有状态的Widget：有状态的Widget是基于它自己的配置建立的，但可以动态变化。
小工具生命周期 🧬
无状态Widget的生命周期
无状态Widget是用一个类来构建的。它的构建方法可以在三种不同情况下被调用。
- 当widget第一次被创建时
- 当它的父类改变/更新时
- 当一个InheritedWidget发生变化时
有状态的小部件的生命周期
有状态的widget是用两个类来声明的，有状态的widget类和状态类。当widget的配置改变时，Stateful Widget会被重建，但是State类会持续存在。有一点需要注意的是，当有状态的Widget从树中移除，然后再插入时，会创建一个新的State对象。以下是一个有状态的小部件的生命周期事件。
⁍initState(): 这个方法在对象插入树中时被调用一次。
⁍dispose(): 当这个对象被永久地从树上移除时被调用。
⁍didChangeDependencies(): 当这个状态对象发生变化时被调用。
⁍didUpdateWidget(Contancts oldWidget): 当widget的配置发生变化时，该方法被触发
⁍deactivate(): 当这个对象从树上移走时被调用。
⁍build(BuildContext ctx): 这个方法被多次调用，BuildContext包含的信息，如这个小部件在小部件树中的位置。
⁍setState(): 通知框架这个对象的状态已经改变，触发这个状态对象的构建，并更新UI。
小部件，元素和渲染对象树 🌲
当我们把Widget组合在一起时，它们就形成了Widget树。它类似于浏览器上的DOM如何形成一个树状结构。所有安装在屏幕上的元素被渲染出来，就形成了元素树。当您运行一个Flutter应用程序时，主函数调用runApp()方法。runApp()函数接收给定的Widget并使其成为Widget树的根。Flutter框架会处理所有的Widget，每个相应的元素都会被安装。对于树中的每个元素，Flutter将通过在Widget上调用createRenderObject()来创建一个Render Object，创建一个Render Object树。Render Object知道如何确定Widget的大小和绘制，并监听输入和点击测试。
无状态Widget和元素树 🍂
每个无状态Widget都有一个相应的无状态元素。Flutter框架使用createElement方法从Widget发出请求，然后将该元素挂载到元素树中。每个元素都包含一个对Widget的引用。该元素会触发widget的构建方法，并检查子widget，每个子widget都会创建自己的元素，并挂载到元素树上。
有状态的部件和元素树 🌱
每个有状态的widget都有一个相应的有状态元素。Flutter框架调用createElement方法来创建有状态元素，有状态元素被安装到元素树中。由于这是一个有状态的
部件，有状态的元素要求部件通过调用有状态的部件类的createState方法创建一个状态对象。有状态的元素现在有一个对状态对象和
元素树中
给定位置的部件的引用
。有状态的元素调用状态对象widget的构建方法来检查子widget，每个子widget都会创建自己的元素并被挂载到元素树上。
如何检查您的Flutter应用程序的Widget树 🔍
Flutter部件检查器帮助您可视化和探索Flutter部件树，并可用于了解现有布局和诊断布局问题
要调试布局问题，在调试模式下运行应用程序，并通过点击DevTools工具栏上的Flutter检查器标签来打开检查器。
这是对Flutter小部件、小部件树和元素树的一个基本概述。下面列出了一些深入了解这些概念的资源。
