客户端开发: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方法