一、Flutter生命周期
1、Flutter小部件的生命周期：
a、StatelessWidget可以由父Widget直接传入值，调用build方法来构建，整个过程非常简单；
b、而StatefulWidget需要通过State来管理其数据，并且还要监控状态的改变决定是否重新build整个Widget；
所以，我们主要讨论StatefulWidget的生命周期，也就是它从创建到销毁的整个过程；
二、生命周期详解
StatefulWidget本身由两个类组成的：StatefulWidget和State，我们分开进行分析。
首先，执行StatefulWidget中相关的方法：
1、执行StatefulWidget的构造函数（Constructor）来创建出StatefulWidget；
2、执行StatefulWidget的createState方法，来创建一个维护StatefulWidget的State对象；
其次，调用createState创建State对象时，执行State类的相关方法：
1、执行State类的构造方法（Constructor）来创建State对象；
2、执行initState，我们通常会在这个方法中执行一些数据初始化的操作，或者也可能会发送网络请求；
注意：这个方法是重写父类的方法，必须调用super，因为父类中会进行一些其他操作；
并且如果你阅读源码，你会发现这里有一个注解（annotation）：@mustCallSuper
3、执行didChangeDependencies方法，这个方法在两种情况下会调用
情况一：调用initState会调用；
情况二：从其他对象中依赖一些数据发生改变时，比如前面我们提到的InheritedWidget（这个后面会讲到）；
4、Flutter执行build方法，来看一下我们当前的Widget需要渲染哪些Widget；
5、当前的Widget不再使用时，会调用dispose进行销毁；
6、手动调用setState方法，会根据最新的状态（数据）来重新调用build方法，构建对应的Widgets；
7、执行didUpdateWidget方法是在当父Widget触发重建（rebuild）时，系统会调用didUpdateWidget方法；
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的编程范式
命令式编程： 命令式编程非常好理解，就是一步步给计算机命令，告诉它我们想做什么事情；
声明式编程： 声明式编程通常是描述目标的性质，你应该是什么样的，依赖哪些状态，并且当依赖的状态发生改变时，我们通过某些方式通知目标作出相应；
命令式编程：一步步告诉浏览器我要做什么事情；
声明式编程：我只是告诉h2标签中我需要显示title，当title发生改变的时候，通过一些机制自动来更新状态；
Flutter是声明式编程“
var title = "Hello World";
Text(title); // 告诉Text内部显示的是title
// 数据改变
title = "Hello Flutter";
setState(() => null); // 通知重新build Widget即可
下面是命令式编程：
final text = new Text();
var title = "Hello World";
text.setContent(title);
// 修改数据
title = "Hello Flutter";
text.setContent(title);
网友评论