在说到StatefulWidget之前,先说下State。State的作用有两点:
State的生命周期有四种状态:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Txxq1QXj-1612666084611)(http://whysodiao.com/images/State LifeCycle.png)]
完整生命周期如下:
State中比较重要的一个方法是setState
,当修改状态时,widget会被更新。比方说点击CheckBox,会出现选中和非选中状态之间的切换,就是通过修改状态来达到的。
查看setState源码,在一些异常的情况下将会抛出异常:
检查完一系列异常后,最后调用代码如下:
_element.markNeedsBuild();
markNeedsBuild内部,则是通过标记element为dirty,在下一帧的时候重建(rebuild)。可以看出setState并不是立即生效,它只是将widget进行了标记,真正的rebuild操作,则是等到下一帧的时候才会去进行。
StatefulWidget和StatelessWidget如下所示
一个StatelessWidget可以用多个不同的BuildContext构建,而一个StatefulWidget会为每个BuildContext创建一个State对象。
对于StatelessWidget,build方法会在如下三种情况下调用,
class GreenFrog extends StatelessWidget {
const GreenFrog({ Key key }) : super(key: key);
@override
Widget build(BuildContext context) {
return new Container(color: const Color(0xFF2DBD3A));
}
}
StatefulWidget的两个主要类别:
class YellowBird extends StatefulWidget {
const YellowBird({ Key key }) : super(key: key);
@override
_YellowBirdState createState() => new _YellowBirdState();
}
class _YellowBirdState extends State<YellowBird> {
@override
Widget build(BuildContext context) {
return new Container(color: const Color(0xFFFFE306));
}
}
ld(BuildContext context) {
return new Container(color: const Color(0xFFFFE306));
}
}
联系客服