widget介绍

一、定义：Flutter里的UI控件

在Flutter中几乎所有的对象都是一个 widget。Flutter 中是通过 Widget 嵌套 Widget 的方式来构建UI和进行实践处理的，Flutter 中万物皆为Widget。

二、类型：有状态 & 无状态

我们通常会通过继承StatelessWidget或StatefulWidget来间接继承widget类来实现。

StatelessWidget和StatefulWidget都是直接继承自Widget类，而这两个类也正是 Flutter 中非常重要的两个抽象类。

class MyApp extends StatelessWidget {}

class MyApp extends StatefulWidget{}

有状态：

---

class MyApp extends StatefulWidget{

const MyApp({super.key});//创建构造函数，必写

  @override   //必写

  State  createState() =>_State();

  //有状态的widget，必须创建状态

}

我们只要在声明变量与方法时，在前面加上“_”即可作为 private 方法使用（代表着其他页面无法调用到）

//调用_State()

class _State  extends State {

//这里做初始化到销毁的处理

  @override

  void initState() {}

//build UI必须实现

@override

Widgetbuild(BuildContext context) {}

}

无状态：

---

class HomeRecommendPanelextends StatelessWidget {

const HomeRecommendPanel({super.key});

//build UI必须实现

@override

Widgetbuild(BuildContext context) {}

}

三、生命周期

StatelessWidget 只有createElement，build两个生命周期方法。

StatefullWidget 的生命周期按照时期不同，分为三组：

1. 初始化时期：createState、initState

---

- createState： 当创建一个新的StatefullWidget时，会立即调用，该方法必须被覆盖。

- initState：    创建widget调用的除构造方法外的第一个方法。类似Android的onCreate与iOS的viewDidLoad

    通常做一些初始化工作。

2. 更新时期：didChangeDependencies、build、didUpdateWidget

---

-didChangeDependencies()：当依赖的State对象改变时会调用：

 a：在第一次构建widget时，在initState()之后立即调用此方法； 

 b：如果StatefulWidget依赖于InhertedWidget，那么当当前State所依赖的InhertedWidget的变量改变时调用。/// 拓展：InhertedWidget可高效率的将数据在Widget树中向下传递，共享。

-build()：这是一个必须要实现的方法，这里实现要呈现的页面内容。

 a：在didChangeDependencies()之后立即调用;

b：另外当调用setState后也会再次调用该方法刷新UI。

-didUpdateWidget(WidgetLifecycle oldWidget)： 当父组件需要重绘的时候调用，是一个不常用的生命周期方法。/// if(oldWidget.xxx != widget.xxx)...

build 构建该Widget 表示的UI元素。此方法在不同情况下被调用：

1.调用initState之后

2.调用didUpdateWidget之后

3.调用setState之后

4.当State对象的依赖更改（didChangeDependencies）之后

5.当State对象从树中一个位置移除后（调用deactivate）又重新插入到树的其它位置时调用

3. 销毁期：deactivete、dispose

---

- deactivete(): 不常用的生命周期方法。在组件被移除时调用，且是在dispose之前调用。

- dispose()： 组件被销毁时调用，一般用于执行资源的释放工作（监听器卸载、channel的销毁等）。

---

打开页面：依次调用initState --> didChangeDependencies --> build方法。

销毁页面：依次调用deactivete --> dispose方法。