Flutter中StatefulWidget的生命周期

StatefulWidget生命周期

StatefulWidget的生命周期如下表所示：

生命周期方法	调用时机	执行次数
createState	创建State对象前	1
constructor	创建State对象时	1
initState	当State 对象插入视图树之后	1
didChangeDepandencies	State 对象的依赖关系发生变化后	>=1
build	State 改动之后	>=1
setState	需要刷新 UI 时	>=1
didUpdateWidget	当 widget 配置发生变化时，如调用 setState 触发	>=1
deactivate	widget 不可见时	>=1
dispose	widget 被永久移除	1

实例演示

参考源码如下：

import 'package:demo/utils/logger.dart';
import 'package:demo/widgets/log_list.dart';
import 'package:flutter/material.dart';

class StatefulWidgetLifeCircle extends StatefulWidget {
  @override
  _StatefulWidgetLifeCircleState createState() {
    CusLogger.logger.i("Old -- createState");
    return _StatefulWidgetLifeCircleState();
  }
}

class _StatefulWidgetLifeCircleState extends State<StatefulWidgetLifeCircle> {
  List<String> messages = [];
  int _counter = 0;
  _StatefulWidgetLifeCircleState() {
    CusLogger.logger.i("Old -- constructor");
  }

  @override
  void initState() {
    super.initState();
    CusLogger.logger.i("Old -- initState");
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    CusLogger.logger.i("Old -- didChangeDependencies");
  }

  @override
  void didUpdateWidget(covariant StatefulWidgetLifeCircle oldWidget) {
    super.didUpdateWidget(oldWidget);
    CusLogger.logger.i("Old -- didChangeDependencies");
  }

  @override
  void deactivate() {
    super.deactivate();
    CusLogger.logger.i("Old -- deactivate");
  }

  @override
  void dispose() {
    super.dispose();
    CusLogger.logger.i("Old -- dispose");
  }

  @override
  void setState(VoidCallback fn) {
    super.setState(fn);
  }

  @override
  Widget build(BuildContext context) {
    CusLogger.logger.i("Old -- build");
    return Scaffold(
        appBar: AppBar(
          title: const Text("StatefulWidget生命周期"),
          actions: [
            Container(
              padding: EdgeInsets.only(right: 12),
              alignment: Alignment.center,
              child: Text("数字： " + _counter.toString()),
            )
          ],
        ),
        body: Flex(
          direction: Axis.vertical,
          children: [
            Flexible(
              flex: 7,
              child: ListView.builder(
                  itemBuilder: (context, index) => Container(
                    padding: EdgeInsets.symmetric(vertical: 4, horizontal: 18),
                        child: LogItem(CusLogger.logger.logs[index], index),
                      ),
                  itemCount: CusLogger.logger.logs.length),
            ),
            Flexible(
                flex: 1,
                child: Wrap(
                  spacing: 12,
                  children: [
                    TextButton(
                        onPressed: () {
                          CusLogger.logger.i("old -- setState +1");
                          setState(() {
                            _counter++;
                          });
                        },
                        child: Text("数字 +1")),
                    TextButton(
                        onPressed: () {
                          CusLogger.logger.i("old -- setState -1");
                          setState(() {
                            _counter--;
                          });
                        },
                        child: Text("数字 -1")),
                    TextButton(
                        onPressed: () {
                          CusLogger.logger.clear();
                          if (mounted) setState(() {});
                        },
                        child: Text("清除日志")),
                    TextButton(
                        onPressed: () {
                          Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                      builder: (context) => NewPage()))
                              .then((value) {
                                // 推迟两秒等待New page资源释放完成更新状态
                            Future.delayed(
                                Duration(seconds: 2), () => setState(() {}));
                          });
                        },
                        child: Text("新的页面")),
                  ],
                )),
          ],
        ));
  }
}

class NewPage extends StatefulWidget {
  @override
  _NewPageState createState() {
    CusLogger.logger.i("New -- createState");
    return _NewPageState();
  }
}

class _NewPageState extends State<NewPage> {
  @override
  void didUpdateWidget(covariant NewPage oldWidget) {
    super.didUpdateWidget(oldWidget);
    CusLogger.logger.i("New -- didUpdateWidget");
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    CusLogger.logger.i("New -- didChangeDependencies");
  }

  @override
  void deactivate() {
    super.deactivate();
    CusLogger.logger.i("New -- deactivate");
  }

  @override
  void dispose() {
    super.dispose();
    CusLogger.logger.i("New -- dispose");
  }

  @override
  void initState() {
    super.initState();
    CusLogger.logger.i("New -- initState");
  }


  @override
  Widget build(BuildContext context) {
    CusLogger.logger.i("New -- build");
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: (){
            CusLogger.logger.i("New -- 退出");
            Navigator.pop(context);
          },
        ),
        title: Text("新的页面"),
      ),
      body: LogList(),
    );
  }
}

/// LogList
import 'package:demo/utils/logger.dart';
import 'package:flutter/material.dart';

class LogList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: CusLogger.logger.logs.length,
        itemBuilder: (context, index) => Padding(
            padding: EdgeInsets.symmetric(vertical: 6, horizontal: 16),
            child: LogItem(CusLogger.logger.logs[index], index)));
  }
}

class LogItem extends StatelessWidget{

  final String log;
  final int index;


  LogItem(this.log,this.index);
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          width: 32,
          child: Text("${index +1}"),
        ),
        SizedBox(width: 12,),
        Text(log),
      ],
    );
  }

}

/// logger
class Logger {
  Logger._privateConstructor();
  static final Logger _instance = Logger._privateConstructor();
  static Logger get instance { return _instance;}
  List<String> logs = [];
  i(String message){
    logs.add(message);
  }
  clear(){
    logs.clear();
    logs.add("清除日志");
  }
}

class CusLogger {
  static final logger = Logger.instance;
}