目录前言1.为什么需要生命周期函数2.StatefulWidget生命周期函数1.初识StatefulWidget生命周期函数2.didUpdateWidget3.StatefulWidget中生命周期函数方法详解1.initState2.didChangeDependencies3.build4.didUpdateWidget5.setState6.deactivate7.dispose3.Flutter生命周期总结1.调用顺序2.函数调用时机以及主要作用4.生命周期函数的验证1.创建和销毁时期函数的验证2.didUpdateWidget函数验证3.didChangeDependencies函数验证前言在Flutter中，生命周期函数是管理StatefulWidget状态的关键机制。通过生命周期函数，我们可以控制Widget的初始化、更新和销毁过程，使得应用的状态管理和资源控制更加灵活。本文将详细介绍Flutter中的生命周期函数，帮助你更好地掌握Flutter应用的生命周期。1.为什么需要生命周期函数生命周期函数允许我们在Widget的创建、更新和销毁过程中执行特定操作，比如数据的初始化、网络请求、资源的释放等。尤其是在StatefulWidget中，这些函数确保了应用在不同状态下的正确行为。2.StatefulWidget生命周期函数StatefulWidget分成初始化阶段、更新阶段、销毁阶段。我们分别看一下这三个阶段分别执行了什么函数。1.初始化阶段1.constructor这个是构造函数，最先执行。当我们创建StatefulWidget的时候，默认调用构造2.createState然后通过createState方法持有State。这两个函数是组件初始化之前调用的。我们可以使用快捷键打印stf直接输入Widget名称就可以生成这两个函数。我们创建一空的StatefulWidget，然后打印下各个周期的函数。然后再离开这个StatefulWidget。我们可以在控制台打印下这两个函数。class StatefulWidgetMainPage extends StatefulWidget { // 注意：const 构造函数不能包含函数体，为打印构造函数执行需去掉 const StatefulWidgetMainPage({super.key}) { debugPrint('[生命周期] 构造函数：创建 Widget 配置对象（先于 createState）'); } @override StateStatefulWidgetMainPage createState() = _StatefulWidgetMainPageState(); }控制台打印日志如下：图1.最简单的StatefulWidget生命周期函数调用过程当我们进入一个页面中并且没有操作的时候，进入页面然后返回，依次会调用下面的方法。contructor-createState-initState → didChangeDependencies → build当我们返回上一页或者离开的时候，依次调用下面的方法。deactivate → disposeimport 'package:flutter/material.dart'; class StfHomePageWrapper extends StatefulWidget { const StfHomePageWrapper({super.key}); @override StateStfHomePageWrapper createState() = _StfHomePageWrapperState(); } class _StfHomePageWrapperState extends StateStfHomePageWrapper { int _counter = 0; void _triggerDidUpdateWidget() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return StfHomePage( key: ValueKey(_counter), onTriggerDidUpdateWidget: _triggerDidUpdateWidget, ); } } class StfHomePage extends StatefulWidget { final VoidCallback? onTriggerDidUpdateWidget; const StfHomePage({super.key, this.onTriggerDidUpdateWidget}); @override StateStfHomePage createState() = _StfHomePageState(); } class _StfHomePageState extends StateStfHomePage { String title = ''; bool _toggle = false; void _logWithClassName(String message) { debugPrint('======$runtimeType: $message======='); } void updateWidget() { _logWithClassName('updateWidget() called'); setState(() {}); } @override void initState() { super.initState(); _logWithClassName('initState() called'); } @override void didUpdateWidget(covariant StfHomePage oldWidget) { super.didUpdateWidget(oldWidget); _logWithClassName('didUpdateWidget() called'); } @override void deactivate() { super.deactivate(); _logWithClassName('deactivate() called'); } @override void activate() { super.activate(); _logWithClassName('activate() called'); } @override void didChangeDependencies() { super.didChangeDependencies(); _logWithClassName('didChangeDependencies() called'); } @override void dispose() { super.dispose(); _logWithClassName('dispose() called'); } @override Widget build(BuildContext context) { _logWithClassName('build() called'); return Material( child: Scaffold( body: Center( child: Column( children: [ TitleWidget(title: title, toggle: _toggle), SizedBox(height: 12), CommonButtonWidget( title: '触发 didUpdateWidget', onClick: () { setState(() { _toggle = !_toggle; }); }, toggle: _toggle, ), SizedBox(height: 12), ], ), ), ), ); } } class CommonButtonWidget extends StatelessWidget { final String title; final Function onClick; final bool toggle; const CommonButtonWidget({ super.key, required this.title, required this.onClick, required this.toggle, }); @override Widget build(BuildContext context) { return ElevatedButton( onPressed: () { onClick(); }, child: Text(title), ); } } class TitleWidget extends StatefulWidget { final String title; final bool toggle; const TitleWidget({Key? key, required this.title, required this.toggle}) : super(key: key); @override _TitleWidgetState createState() = _TitleWidgetState(); } class _TitleWidgetState extends StateTitleWidget { void _logWithClassName(String message) { debugPrint('======$runtimeType: $message======='); } @override void didUpdateWidget(covariant TitleWidget oldWidget) { super.didUpdateWidget(oldWidget); _logWithClassName( 'didUpdateWidget() called. toggle changed: ${oldWidget.toggle} - ${widget.toggle}', ); } @override Widget build(BuildContext context) { return Column( children: [ SizedBox( width: 100, height: 30, child: Text( widget.t