Flutter学习-7
StatefulWidget生命周期
Flutter学习-7-MakerLi

客户端开发:iOS开发中UIViewController从创建到销毁的整个过程,Android开发中Activity从创建到销毁的整个过程。前端开发中:Vue、React开发中组件也都有自己的生命周期,在不同的生命周期中我们可以做不同的操作;

Flutter小部件的生命周期:

StatelessWidget可以由父Widget直接传入值,调用build方法来构建,整个过程非常简单;

而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,我们通常会在这个方法中执行一些数据初始化的操作,或者也可能会发送网络请求;
  3. 注意:这个方法是重写父类的方法,必须调用super,因为父类中会进行一些其他操作;
  4. 执行didChangeDependencies方法,这个方法在两种情况下会调用情况一:调用initState会调用;情况二:从其他对象中依赖一些数据发生改变时;
  5. Flutter执行build方法,来看一下我们当前的Widget需要渲染哪些Widget;
  6. 当前的Widget不再使用时,会调用dispose进行销毁;
  7. 手动调用setState方法,会根据最新的状态(数据)来重新调用build方法,构建对应的Widgets;
  8. 执行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方法