Flutter 零基础入门（二十六）：StatefulWidget 与状态更新 setState

在前面的学习中，我们已经掌握了：

布局（Row / Column / Expanded）
样式（Container / Text）
图片与图标
按钮与手势（Button / InkWell）

但你可能已经发现一个问题：

页面是"死的"

点了按钮，界面并不会发生变化

这一篇，我们正式解决这个问题。

一、什么是"状态（State）"？

在 Flutter 中：

状态 = 会发生变化的数据

例如：

计数器的数字
是否已点赞
是否登录
是否选中

📌 一句话理解：

只要会变，就是状态

二、StatelessWidget 的局限性

你之前写的页面，大多是：

dart 复制代码

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello');
  }
}

特点：

没有状态
一旦构建完成，内容就不会变

👉 StatelessWidget 适合"静态页面"

三、StatefulWidget：可变页面的核心

1️⃣ 什么是 StatefulWidget？

StatefulWidget 是：

可以拥有状态，并且状态变化后可以刷新 UI 的 Widget

2️⃣ 基本结构（一定要记住）

复制代码

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

📌 记忆重点：

Widget 本身不变
State 才是真正"活的"

四、State 中存放状态变量

复制代码

class _MyPageState extends State<MyPage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Text('当前数量：$count');
  }
}

这里：

count 就是状态
UI 依赖状态显示

五、setState：刷新界面的关键（重点）

1️⃣ setState 是什么？

复制代码

setState(() {
  count++;
});

作用只有一个：

告诉 Flutter：状态变了，请重新 build

2️⃣ 没有 setState 会怎样？

复制代码

count++;

数据变了
界面不会更新

📌 这是新手最常见的坑。

六、第一个完整示例：计数器

复制代码

class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              '当前值：$count',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 12),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  count++;
                });
              },
              child: Text('加 1'),
            ),
          ],
        ),
      ),
    );
  }
}

📌 这是 Flutter 官方示例的简化版。

七、setState 的正确使用原则

✅ 应该做的

复制代码

setState(() {
  count++;
});

❌ 不应该做的

复制代码

setState(() {
  doNetworkRequest();
});

📌 原则：

setState 里只放"状态修改"

八、State 的生命周期（简单了解）

State 会经历：

1️⃣ 创建

2️⃣ build

3️⃣ 多次 setState → build

4️⃣ 销毁

你现在只需要记住一句话：

build 会被反复调用

九、常见状态场景示例

1️⃣ 点赞 / 取消点赞

复制代码

bool liked = false;

IconButton(
  icon: Icon(
    liked ? Icons.favorite : Icons.favorite_border,
    color: liked ? Colors.red : Colors.grey,
  ),
  onPressed: () {
    setState(() {
      liked = !liked;
    });
  },
)

2️⃣ 显示 / 隐藏内容

复制代码

bool show = true;

if (show) Text('我是内容');

十、新手常见误区总结

❌ 忘记用 StatefulWidget

❌ 修改状态却不调用 setState

❌ 把所有代码都写进 setState

❌ 不理解 build 会多次执行

📌 一句话避坑：

数据变 → setState → 重新 build

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

你已经掌握了：

什么是状态（State）
StatelessWidget vs StatefulWidget
setState 的真正作用
点击后更新界面的完整流程

从这一刻起：

你的 Flutter App 真正"活"了

十二、总结

本篇你学会了：

Flutter 的状态基础模型
动态 UI 的核心机制
最重要的 setState 用法

🔜 下一篇预告

《Flutter 零基础入门（二十七）：Widget 生命周期（initState / dispose）》

下一篇我们将学习：

initState 是干嘛的？
dispose 什么时候调用？
资源释放的重要性
页面初始化的正确姿势

从下一篇开始：

你将真正"掌控 Widget 的一生" 🧠