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树中进行渲染
