Flutter 之 生命周期（三）

1、Fultter 生命周期

生命周期的作用：

• 初始化一些数据、变量、状态
• 发送网络请求
• 监听事件
• 管理内存

1.1 StatelessWidget 生命周期

class MSHomePage extends StatelessWidget {
  MSHomePage() {
    print("Flutter: StatelessWidget 构造函数 调用");
  }
  @override
  Widget build(BuildContext context) {
    print("Flutter: StatelessWidget build 调用");
    return Text("Hello World");
  }
}

StatelessWidget 不可变，在它的生命周期中，只会执行构造函数、build方法

1.2 StatefulWidget 生命周期

在下图中，灰色部分的内容是Flutter内部操作的，我们并不需要手动去设置它们；
白色部分表示我们可以去监听到或者可以手动调用的方法

截屏2022-04-11 下午3.26.55.png

首先，执行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方法

1.2.1 代码演示

import 'package:flutter/material.dart';

void main(List args) {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State createState() => _MyAppState();
}

class _MyAppState extends State {
  var curHomePage = MSHomePageBody();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("声明周期"),
        ),
        body: curHomePage,
        floatingActionButton: IconButton(
          icon: Icon(Icons.change_circle),
          onPressed: () {
            setState(() {
              curHomePage = MSHomePageBody();
            });
          },
        ),
      ),
    );
  }
}

class MSHomePageBody extends StatefulWidget {
  MSHomePageBody() {
    print("1. MSHomePageBody  构造函数");
  }
  @override
  State createState() {
    print("2. MSHomePageBody  createState");
    return _MSHomePageBodyState();
  }
}

class _MSHomePageBodyState extends State {
  int _counter = 0;
  _MSHomePageBodyState() {
    print("3. _MSHomePageBodyState 构造函数");
  }

  @override
  void initState() {
    print("4. _MSHomePageBodyState initState");
    super.initState();
  }

  @override
  void didChangeDependencies() {
    // 调用时机
    // 调用initState会调用
    // 从其他对象中依赖一些数据发生改变时
    print("_MSHomePageBodyState didChangeDependencies");
    super.didChangeDependencies();
  }

  @override
  void didUpdateWidget(covariant MSHomePageBody oldWidget) {
    // 调用时机
    // 当父Widget触发重建（rebuild）时，系统会调用didUpdateWidget方法
    print("_MSHomePageBodyState didUpdateWidget");
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    print("5. _MSHomePageBodyState build");
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: () {
            setState(() {
              _counter++;
            });
          },
          child: Text(
            "点击",
            style: TextStyle(fontSize: 20),
          ),
        ),
        Text(
          "当前计数$_counter",
          style: TextStyle(fontSize: 20),
        ),
      ],
    );
  }

  @override
  void dispose() {
    print("6. Flutter: _MSHomePageBodyState dispose");
    super.dispose();
  }
}

运行App时，打印如下：

flutter: 1. MSHomePageBody  构造函数
flutter: 2. MSHomePageBody  createState
flutter: 3. _MSHomePageBodyState 构造函数
flutter: 4. _MSHomePageBodyState initState
flutter: _MSHomePageBodyState didChangeDependencies
flutter: 5. _MSHomePageBodyState build

我们手动改变counter状态(点击+按钮)时，打印如下

flutter: 5. _MSHomePageBodyState build

我们手动改变curHomePage状态(点击底部按钮)时，MSHomePageBody的父Widget发生改变，打印如下：

flutter: 1. MSHomePageBody  构造函数
flutter: _MSHomePageBodyState didUpdateWidget
flutter: 5. _MSHomePageBodyState build

1.3 生命周期的复杂版

1、mounted是State内部设置的一个属性。这个属性是在我们创建完State调用initState之前，Flutter给我们的BuildContent挂载的一个属性。这个属性最主要的作用是为了记录对应的Element是否为空

截屏2022-04-11 下午4.29.41.png

2、dirty state的含义是脏的State
它实际是通过Element的属性来标记的；
将它标记为dirty会等待下一次的重绘检查，强制调用build方法来构建我们的Widget；
3、clean state的含义是干净的State
它表示当前build出来的Widget，下一次重绘检查时不需要重新build；