客户端开发:iOS开发中UIViewController从创建到销毁的整个过程,Android开发中Activity从创建到销毁的整个过程。前端开发中:Vue、React开发中组件也都有自己的生命周期,在不同的生命周期中我们可以做不同的操作;
Flutter小部件的生命周期:
StatelessWidget可以由父Widget直接传入值,调用build方法来构建,整个过程非常简单;
而StatefulWidget需要通过State来管理其数据,并且还要监控状态的改变决定是否重新build整个Widget;
在这个版本中,我讲解那些常用的方法和回调,下一个版本中我解释一些比较复杂的方法和回调
我们知道StatefulWidget本身由两个类组成的:StatefulWidget和State,我们分开进行分析
首先,执行StatefulWidget中相关的方法:
其次,调用createState创建State对象时,执行State类的相关方法:
示例代码如下:
import 'package:flutter/material.dart';
main(List<String> args) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("HelloWorld"),
),
body: HomeBody(),
),
);
}
}
class HomeBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
print("HomeBody build");
return MyCounterWidget();
}
}
class MyCounterWidget extends StatefulWidget {
MyCounterWidget() {
print("执行了MyCounterWidget的构造方法");
}
@override
State<StatefulWidget> createState() {
print("执行了MyCounterWidget的createState方法");
// 将创建的State返回
return MyCounterState();
}
}
class MyCounterState extends State<MyCounterWidget> {
int counter = 0;
MyCounterState() {
print("执行MyCounterState的构造方法");
}
@override
void initState() {
super.initState();
print("执行MyCounterState的init方法");
}
@override
void didChangeDependencies() {
// TODO: implement didChangeDependencies
super.didChangeDependencies();
print("执行MyCounterState的didChangeDependencies方法");
}
@override
Widget build(BuildContext context) {
print("执行执行MyCounterState的build方法");
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
color: Colors.redAccent,
child: Text("+1", style: TextStyle(fontSize: 18, color: Colors.white),),
onPressed: () {
setState(() {
counter++;
});
},
),
RaisedButton(
color: Colors.orangeAccent,
child: Text("-1", style: TextStyle(fontSize: 18, color: Colors.white),),
onPressed: () {
setState(() {
counter--;
});
},
)
],
),
Text("当前计数:$counter", style: TextStyle(fontSize: 30),)
],
),
);
}
@override
void didUpdateWidget(MyCounterWidget oldWidget) {
super.didUpdateWidget(oldWidget);
print("执行MyCounterState的didUpdateWidget方法");
}
@override
void dispose() {
super.dispose();
print("执行MyCounterState的dispose方法");
}
}
打印结果如下:
flutter: HomeBody build
flutter: 执行了MyCounterWidget的构造方法
flutter: 执行了MyCounterWidget的createState方法
flutter: 执行MyCounterState的构造方法
flutter: 执行MyCounterState的init方法
flutter: 执行MyCounterState的didChangeDependencies方法
flutter: 执行执行MyCounterState的build方法
// 注意:Flutter会build所有的组件两次(查了GitHub、Stack Overflow,目前没查到原因)
flutter: HomeBody build
flutter: 执行了MyCounterWidget的构造方法
flutter: 执行MyCounterState的didUpdateWidget方法
flutter: 执行执行MyCounterState的build方法
当我们改变状态,手动执行setState方法后会打印如下结果:
flutter: 执行执行MyCounterState的build方法