Widget是什么

是描述 UI 渲染的配置信息，同样也是数据的映射。是 Flutter中控件实现的基本单位。Widget里面存储了一个视图的配置信息，包括布局、属性等。

Widget构造函数

示例代码：

class MyLessWidget extends StatelessWidget{
  final int a;
  final String? str;
  const MyLessWidget(Key key,this.a,{this.str}):super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ElevatedButton(
        child: const Text("button"),
        onPressed: (){
          // x ++;
        },
      ),
    );
  }
}

MyLessWidget(Key key,this.a,{this.str})，

MyLessWidget()调用自己的构造函数。
在（）里面的是参数。
用{}包裹的为可选参数。

冒号：的含义

冒号的作用是初始化，在执行构造函数之前，初始化实例变量
MyLessWidget(Key key,this.a,{this.str}):super(key: key);就是在执行MyLessWidget之前调用父类

key

Key（大写开头）表示类型，key表示定义的标识符
super(key:key)。表示把标识符传给父类

参考：ifredom

StatelessWidget，StatefulWidget

Widget主要分为StatelessWidget与StatefulWidget。

他们的区别在：有无状态管理。

StatelessWidget：是一个不需要状态更改的widget - 它没有要管理的内部状态。

StatefulWidget：可变状态的widget。 使用setState方法管理StatefulWidget的状态的改变。调用setState告诉Flutter框架，某个状态发生了变化，Flutter会重新运行build方法，以便应用程序可以应用最新状态。

这两个Widget的描述到底是什么意思？
比如说有一个Widget需要点击按钮后把Widget颜色从原来颜色换成红色，这个时候Widget的状态就是可变的，使用StatefulWidget。而当需求是只需要一个直接展示不做变更的Widget时，使用StatelessWidget。

那按这个理解，StatefulWidget也可以实现StatelessWidget的功能。那么到底是有什么本质上的区别呢？

使用StatefulWidget时，应该有注意到StatefulWidget都有State，而在setState时该Widget都会重建（关于具体步骤下章在总结）。而重建耗时与耗性能。所以当无需状态管理时，使用StatelessWidget可提升UI响应和性能。

Widget生命周期

通过打印查看执行顺序,以StatefulWidget为例：

class Box extends StatefulWidget{
  final Color color ;

  const Box(this.color,{Key? key}):super(key: key);

  @override
  BoxState createState() => BoxState();
}

class BoxState extends State<Box>{
  int count = 0;

  BoxState(){
    print("创建state");
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    
  }
  
  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
  }
  
  @override
  void didUpdateWidget(covariant Box oldWidget) {
    // TODO: implement didUpdateWidget
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: 100,
      height: 100,
      color: widget.color,
      child: Column(
        children: [
          Text(
            "$count",
            style: TextStyle(
              color: Colors.white
            ),
          ),
          IconButton(onPressed: (){
            setState(() {
              count ++;
            });
          }, icon: Icon(Icons.add)),
        ],
      ),
    );
  }
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }
}

1,Widget构造方法:const Box(this.color,{Key? key}):super(key: key);

2, Widget的createState:createState()

3,State的构造方法:BoxState()

4,State的initState方法.

添加到widget树中时调用，在这里View并没有完成渲染，在此我们可以执行一些初始化数据等操作。关于调用super.initState()(以及其他的方法里面的调用super)，是因为他的父类有@ mustCallSuper规定

5: didChangeDependencies：依赖关系改变

-在第一次创建时调用。
-在当层级改变或者层型改变时会调用。
如由：

//本来代码
body: ElevatedButton(
        child: const Text("button"),
        onPressed: (){
          // x ++;
        },
      ),

//层型改变
body: GestureDetector(
        child: const Text("button"),
        onTap: (){

        },
      ),

//层级改变
body:Container(
        child: ElevatedButton(
          child: const Text("button"),
          onPressed: (){
               // x ++;
          },
      ),

6:State的build方法:

-didChangeDependencies后会调用
-每次所依赖的状态发生改变的时候build就会被调用

7: didUpdateWidget

当父级widget触发重建，会被调用

8: dispose：销毁widget时调用

10: setState(){}

在需要刷新时需要手动调用，它会重新build widget。是 _element.markNeedsBuild()->rebuild()-> _dirtyElements.add(element)重新加到Element树中进行渲染