一、StatefulWidget和StatelessWidget
1、StatelessWidget:通常用来展示哪些数据固定不变的。
2、StatefulWidget:数据会发生改变,我们使用StatefulWidget。
比如Flutter默认程序中的计数器案例,点击了+号按钮后,显示的数字需要+1;
比如在开发中,我们会进行下拉刷新、上拉加载更多,这时数据也会发生变化.
二、StatefulWidget问题
1、定义到Widget中的数据都是不可变的,必须定义为final,为什么呢?
a、Flutter在设计的时候就决定了一旦Widget中展示的数据发生变化,就重新构建整个Widget;
b、Flutter通过一些机制来限定定义到Widget中的成员变量必须是final的;
Widget源码:
@immutable
abstract class Widget extends DiagnosticableTree {
// ...省略代码
}
@immutable注解标明的类或者子类都必须是不可变的。所以,定义到Widget中的数据一定是不可变的,需要使用final来修饰。
2、如何存储Widget状态?
既然Widget是不可变,那么StatefulWidget如何来存储可变的状态呢?
a、StatelessWidget无所谓,因为它里面的数据通常是直接定义完后就不修改的。
b、但StatefulWidget需要有状态(可以理解成变量)的改变,这如何做到呢?
4、Flutter将StatefulWidget设计成了两个类,也就是你创建StatefulWidget时必须创建两个类:
a、一个类继承自StatefulWidget,作为Widget树的一部分;
b、一个类继承自State,用于记录StatefulWidget会变化的状态,并且根据状态的变化,构建出新的Widget;
5、创建一个StatefulWidget,我们通常会按照如下格式来做:
a、当Flutter在构建Widget Tree时,会获取State的实例,并且它调用build方法去获取StatefulWidget希望构建的Widget;
b、那么,我们就可以将需要保存的状态保存在MyState中,因为它是可变的;
class MyStatefulWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// 将创建的State返回
return MyState();
}
}
class MyState extends State<MyStatefulWidget> {
@override
Widget build(BuildContext context) {
return <构建自己的Widget>;
}
}
6、思考:为什么Flutter要这样设计呢?
这是因为在Flutter中,只要数据改变了Widget就需要重新构建(rebuild).
7、如何可以让Flutter知道我们的状态发生改变了,重新构建我们的Widget呢?
我们需要调用一个State中默认给我们提供的setState方法;
可以在其中的回调函数中修改我们的变量;
RaisedButton(
color: Colors.orangeAccent,
child: Text("-1", style: TextStyle(fontSize: 18, color: Colors.white),),
onPressed: () {
setState(() {
counter++;
});
},
)
网友评论