目录前言1.StatelessWidget生命周期2.StatefulWidget生命周期1.生命周期演示代码一2.生命周期演示代码二3.生命周期演示代码三4.总结每个生命周期的使用场景3.整个App的生命周期函数1.常见的生命周期状态AppLifecycleState2.示例:监听 App 的生命周期变化3.使用建议前言在 Flutter 的开发过程中理解 Widget 的生命周期函数是非常重要的。它不仅帮助我们掌握组件是如何初始化、构建、更新和销毁的还为我们处理网络请求、动画、订阅、释放资源等提供了正确的时机。本篇文章将带你全面理解 Flutter 的生命周期机制配合代码示例彻底搞懂它们的作用与使用场景。1.StatelessWidget生命周期StatelessWidget 是无状态组件它没有复杂的生命周期只有一个build函数class HomePage extends StatelessWidget { final String title; const HomePage({super.key, required this.title}); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(首页)), body: Center( child: Text(Hello StatelessWidget), ), ); } }每次依赖更新、父组件刷新都会调用 build()没有更多生命周期控制。2.StatefulWidget生命周期相比之下StatefulWidget 有更丰富的生命周期方法它由两个部分组成StatefulWidget 本身不可变配置StateStatefulWidget 状态类真正控制生命周期逻辑的地方生命周期完整顺序如下顺序方法名说明1️⃣createState()创建 State 对象2️⃣initState()初始化仅调用一次常用于发起网络请求、初始化控制器3️⃣didChangeDependencies()依赖变化时调用首次 initState 后也会调用一次4️⃣build()构建 UI可多次调用5️⃣didUpdateWidget()父组件重新构建时如果配置发生变化调用6️⃣deactivate()组件被临时移除未销毁时调用7️⃣dispose()组件永久销毁前调用常用于资源释放1.生命周期演示代码一加入我们有一个名为SecondPage的组件代码如下class SecondPage extends StatefulWidget { const SecondPage({super.key}); override StateSecondPage createState() _SecondPageState(); } class _SecondPageState extends StateSecondPage { override void initState() { super.initState(); debugPrint(initState - 初始化); } override void didChangeDependencies() { super.didChangeDependencies(); debugPrint(didChangeDependencies - 依赖变化); } override void didUpdateWidget(covariant SecondPage oldWidget) { super.didUpdateWidget(oldWidget); debugPrint(didUpdateWidget - 父组件更新); } override void deactivate() { super.deactivate(); debugPrint(deactivate - 临时移除组件); } override void dispose() { debugPrint(dispose - 释放资源); super.dispose(); } override Widget build(BuildContext context) { debugPrint(build - 构建 UI); return Scaffold( appBar: AppBar( title: const Text(StatefulWidget生命周期函数), ), body: Center( child: const Text(我是一个有状态组件), ),); } }当我们进入当前页面的时候控制台依次打印initState - 初始化、didChangeDependencies - 依赖变化、build - 构建 UI。截图如下页面经历了初始化首次初始化之后会调用didChangeDependencies函数然后调用build函数构建UI。2.生命周期演示代码二当我们离开这个页面返回上一个页面的时候控制台打印日志如下此时widget经历了树结构销毁的过程依次调用了deactivate、dispose方法。3.生命周期演示代码三这里还有一个didUpdateWidget函数 父组件传入参数发生变化的时候会调用这个函数为了验证这个函数我修改了一下代码在当前页面嵌套一个子组件SubWidget代码如下class SubWidget extends StatefulWidget { final int version; const SubWidget({super.key, required this.version}); override StateSubWidget createState() _SubWidgetState(); } class _SubWidgetState extends StateSubWidget { override void didUpdateWidget(covariant SubWidget oldWidget) { super.didUpdateWidget(oldWidget); debugPrint(✅ SubWidget didUpdateWidget 被调用); debugPrint(旧 version: ${oldWidget.version} → 新 version: ${widget.version}); } override Widget build(BuildContext context) { return const Center( child: Text(我是子组件 SubWidget), ); } }在当前页面点击按钮的时候修改SubWidget的值控制台就会打印didUpdateWidget方法。4.总结每个生命周期的使用场景方法名使用场景initState初始化状态、控制器、发起网络请求等一次性操作didChangeDependencies当使用了 InheritedWidget 或 Provider 时检测依赖变化build构建 UI响应式更新didUpdateWidget父组件传入参数发生变化时进行比对deactivate页面路由切换时组件临时退出树结构dispose清理定时器、控制器、订阅流等资源释放逻辑3.整个App的生命周期函数在 Flutter 中除了我们熟悉的 Widget 生命周期如 initState、dispose整个 App应用级别也有生命周期用于感知 App 是前台、后台、挂起等状态。Flutter App 的生命周期主要由 WidgetsBindingObserver提供你可以在任意 StatefulWidget 中实现 WidgetsBindingObserver 来监听 App 生命周期事件。1.常见的生命周期状态AppLifecycleState生命周期状态含义说明AppLifecycleState.resumed应用可见并响应用户操作前台AppLifecycleState.inactive应用处于非活动状态切换中、控制中心AppLifecycleState.paused应用不可见后台但未被销毁AppLifecycleState.detached应用仍在 Flutter 引擎中运行但已被分离如 Android 中的关闭2.示例:监听 App 的生命周期变化class AppLifecycleWatcher extends StatefulWidget { const AppLifecycleWatcher({super.key}); override StateAppLifecycleWatcher createState() _AppLifecycleWatcherState(); } class _AppLifecycleWatcherState extends StateAppLifecycleWatcher with WidgetsBindingObserver { override void initState() { super.initState(); // 注册生命周期观察者 WidgetsBinding.instance.addObserver(this); } override void dispose() { // 取消注册 WidgetsBinding.instance.removeObserver(this); super.dispose(); } override void didChangeAppLifecycleState(AppLifecycleState state) { super.didChangeAppLifecycleState(state); switch (state) { case AppLifecycleState.resumed: debugPrint( App 在前台 resumed); break; case AppLifecycleState.inactive: debugPrint( App 不活跃 inactive); break; case AppLifecycleState.paused: debugPrint( App 进入后台 paused); break; case AppLifecycleState.detached: debugPrint( App detached被系统移除); break; } } override Widget build(BuildContext context) { return const Scaffold( body: Center(child: Text(App 生命周期监听中)), ); } }3.使用建议你想做的事情推荐生命周期页面初始化时加载数据initStateApp 回到前台时刷新数据resumedApp 退到后台暂停定时器 /音乐pausedApp 销毁或退出前保存数据dispose
