Flutter 零基础入门（二十七）：Widget 的一生 —— initState、build 与 dispose 全解析

Flutter 零基础入门（二十七）：Widget 的一生 ------ initState、build 与 dispose 全解析

在上一篇中，我们正式迈入了 Flutter 的核心领域：

• StatefulWidget
• State
• setState 刷新界面

你已经知道：

状态变化 → UI 自动更新

但你可能还会有这些疑问：

• 页面什么时候初始化？
• build 为什么会被调用很多次？
• 页面关闭时要不要"清理东西"？

这一篇，我们就来回答这些问题。

---

一、为什么要了解 Widget 生命周期？

在真实 App 中，你一定会遇到：

• 页面初始化时请求数据
• 页面进入时启动动画
• 页面离开时关闭定时器
• 页面销毁时释放资源

📌 这些事情，都和 Widget 生命周期 有关。

---

二、什么是 Widget 的生命周期？

简单理解：

一个 StatefulWidget 从"创建"到"销毁"的完整过程

就像人一样：

• 出生
• 成长
• 工作
• 离开

---

三、StatefulWidget 的生命周期核心方法

在零基础阶段，你只需要重点掌握 3 个方法：

1️⃣ initState()

2️⃣ build()

3️⃣ dispose()

---

四、initState：页面的"出生时刻"（非常重要）

1️⃣ initState 是什么时候调用？

• 只调用一次
• 在页面第一次 build 之前
• State 创建完成后立即调用

📌 记住一句话：

initState 只会执行一次

---

2️⃣ 常见用途

• 初始化变量
• 请求接口数据
• 启动动画
• 初始化控制器（Controller）

---

3️⃣ 基本写法

@override
void initState() {
  super.initState();
  print('页面初始化');
}

⚠️ 注意：

一定要先调用 super.initState()

---

五、build：页面的"渲染过程"

1️⃣ build 是干嘛的？

根据当前状态，构建 UI

@override
Widget build(BuildContext context) {
  return Text('Hello');
}

---

2️⃣ build 会被调用多少次？

👉 很多次

例如：

• setState
• 父组件 rebuild
• 屏幕尺寸变化

📌 非常重要的一句话：

build 不是初始化方法

---

3️⃣ build 里不该做的事情 ❌

❌ 请求网络

❌ 启动定时器

❌ 创建只需要一次的对象

---

六、dispose：页面的"告别时刻"

1️⃣ dispose 是什么时候调用？

• 页面被移除
• State 即将销毁
• 只调用一次

---

2️⃣ 常见用途

• 关闭定时器
• 释放动画控制器
• 关闭 Stream
• 清理资源

---

3️⃣ 基本写法

@override
void dispose() {
  print('页面销毁');
  super.dispose();
}

📌 记住：

dispose 是善后工作

---

七、一个完整生命周期示例

class LifeCycleDemo extends StatefulWidget {
  @override
  _LifeCycleDemoState createState() => _LifeCycleDemoState();
}

class _LifeCycleDemoState extends State<LifeCycleDemo> {
  int count = 0;

  @override
  void initState() {
    super.initState();
    print('initState');
  }

  @override
  Widget build(BuildContext context) {
    print('build');
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            setState(() {
              count++;
            });
          },
          child: Text('点击 $count'),
        ),
      ),
    );
  }

  @override
  void dispose() {
    print('dispose');
    super.dispose();
  }
}

运行后你会看到：

• initState：只执行一次
• build：多次执行
• dispose：页面退出时执行

---

八、生命周期执行顺序（记住这个）

initState
↓
build
↓
setState → build（多次）
↓
dispose

📌 这是 Flutter 状态组件的核心流程图。

---

九、新手最常见的 5 个坑

❌ 在 build 里请求接口

❌ 在 initState 里用 context 做复杂操作

❌ 忘记调用 super

❌ 不释放资源

❌ 以为 build 只执行一次

---

十、这一篇你真正学会了什么？

你已经掌握了：

• StatefulWidget 的生命周期
• initState 的正确用途
• build 的真正职责
• dispose 的重要性

你现在对 Flutter 的理解已经是：

不是"写 UI"，而是"管理状态与生命周期"

---

十一、总结一句话

initState 初始化
build 渲染界面
dispose 善后清理

---

🔜 下一篇预告

《Flutter 零基础入门（二十八）：列表 ListView ------ 最常用的页面结构》

下一篇我们将正式进入：

• ListView
• 列表滚动
• 列表项复用
• 真实 App 的信息流结构

从下一篇开始：

你写的将不再是"单页面"，而是"真实业务页面" 📱