目录

前言

1.StatelessWidget生命周期

2.StatefulWidget生命周期

1.生命周期演示代码（一）

2.生命周期演示代码（二）   

3.生命周期演示代码（三） 

4.总结每个生命周期的使用场景

3.整个App的生命周期函数

1.常见的生命周期状态（AppLifecycleState）

2.示例:监听 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 本身：不可变配置

        State<StatefulWidget> 状态类：真正控制生命周期逻辑的地方

        生命周期完整顺序如下：

顺序	方法名	说明
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
  State<SecondPage> createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @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
  State<SubWidget> createState() => _SubWidgetState();
}

class _SubWidgetState extends State<SubWidget> {
  @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
  State<AppLifecycleWatcher> createState() => _AppLifecycleWatcherState();
}

class _AppLifecycleWatcherState extends State<AppLifecycleWatcher>
    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.使用建议

你想做的事情	推荐生命周期
页面初始化时加载数据	initState
App 回到前台时刷新数据	resumed
App 退到后台暂停定时器 /音乐	paused
App 销毁或退出前保存数据	dispose