Flutter学习-7
2024-11-24 04:28:11
StatefulWidget生命周期
2880
客户端开发:iOS开发中UIViewController从创建到销毁的整个过程,Android开发中Activity从创建到销毁的整个过程。前端开发中:Vue、React开发中组件也都有自己的生命周期,在不同的生命周期中我们可以做不同的操作;
Flutter小部件的生命周期:
StatelessWidget可以由父Widget直接传入值,调用build方法来构建,整个过程非常简单;
而StatefulWidget需要通过State来管理其数据,并且还要监控状态的改变决定是否重新build整个Widget;
StatefulWidget的生命周期就是它从创建到销毁的整个过程:
在这个版本中,我讲解那些常用的方法和回调,下一个版本中我解释一些比较复杂的方法和回调
我们知道StatefulWidget本身由两个类组成的:StatefulWidget和State,我们分开进行分析
首先,执行StatefulWidget中相关的方法:
- 执行StatefulWidget的构造函数(Constructor)来创建出StatefulWidget;
- 执行StatefulWidget的createState方法,来创建一个维护StatefulWidget的State对象;
其次,调用createState创建State对象时,执行State类的相关方法:
- 执行State类的构造方法(Constructor)来创建State对象;
- 执行initState,我们通常会在这个方法中执行一些数据初始化的操作,或者也可能会发送网络请求;
- 注意:这个方法是重写父类的方法,必须调用super,因为父类中会进行一些其他操作;
- 执行didChangeDependencies方法,这个方法在两种情况下会调用情况一:调用initState会调用;情况二:从其他对象中依赖一些数据发生改变时;
- Flutter执行build方法,来看一下我们当前的Widget需要渲染哪些Widget;
- 当前的Widget不再使用时,会调用dispose进行销毁;
- 手动调用setState方法,会根据最新的状态(数据)来重新调用build方法,构建对应的Widgets;
- 执行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会build所有的组件两次(查了GitHub、Stack Overflow,目前没查到原因) flutter: HomeBody build flutter: 执行了MyCounterWidget的构造方法 flutter: 执行MyCounterState的didUpdateWidget方法 flutter: 执行执行MyCounterState的build方法 当我们改变状态,手动执行setState方法后会打印如下结果: flutter: 执行执行MyCounterState的build方法