Widget的概念
在面向对象的语言中有一句话叫 一切皆对象,而在Flutter中有一种说法是 一切皆Widget
Widget是描述一个UI元素的配置数据的对象,不仅仅是一个控件,包含对一个UI元素的样式或者事件等描述
Widget的createElement函数
Widget与Elemen的关系
从上面的概念中其实可以看出,widget只是配置信息,他不是真正呈现的对象,真正显示出来的是Elemen,一个widget可以对应多个Elemen,也就是说Elemen可以随便选择需要的widget,两个Elemen对象选择一个widget他们就展示出来的样式是一样的
StatelessWidget 和 StatefulWidget
StatelessWidget 一种无状态改变的widget,当描述的用户界面部分不依赖于对象本身中的配置信息以及widget的BuildContext 时,无状态widget非常有用,反过来就是StatefulWidget
通俗的讲就是如果一个UI元素是一个不会改变的文本元素(这里可以是任何UI元素),就用StatelessWidget ,如果这个UI元素会改变他的包括Text属性等状态,就用StatefulWidget,也可以这样说 StatefulWidget包含StatelessWidget,但是StatelessWidget是不能达到StatefulWidget的效果的。
AboutDialog, CircleAvatar和 Text 都是StatelessWidget的子类。
Checkbox, Radio, Slider, InkWell, Form, 和 TextField 都是有状态的widget,也是StatefulWidget的子类。
其中从这两个类的子类就可以大致看出这两个类的的区别
举个例子
继承StatelessWidget
class PageDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: Text("举个例子"),
),
body: new Center(
child: Text("我继承StatelessWidget,状态不会改变"),
),
);
}
}
效果图就不截了,当我们继承StatelessWidget之后,只需要实现 build 函数,我们没有办法再去修改他的状态
继承StatefulWidget
class PageOne extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new TextSatte();
}
}
class TextState extends State {
var _count = 0;
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: Text("举个例子"),
),
body: new Stack(
children: <Widget>[
new Align(
child: Text("我继承StatefulWidget$_count"),
),
new Align(
alignment: new FractionalOffset(0.5, 1),
child: new MaterialButton(
onPressed: () {
setState(() {
_count++;
});
},
child: Text("改变状态"),
),
)
],
),
);
}
}
继承StatefulWidget 之后,他让我们必须去实现createState函数,返回一个State,然后我们继承 State 自己写一个TextState,在我们去改变UI元素状态的时候,我们调用了一个 setState 系统函数,然后达到了改变UI元素状态的效果,这是继承 StatelessWidget 做不到的
总结
这里我们学习了widget的含义,知道了他的两个子类StatelessWidget 和StatefulWidget 的区别,其实有一些不好判断是否需要改变状态的UI元素,可以都用StatefulWidget来做,后面确定不需要修改之后可以再修改成StatelessWidget,熟能生巧之后,以后打代码就更加得心应手了。
网友评论