36.Flutter 零基础入门（三十六）：StatefulWidget 与 setState 进阶 —— 动态页面必学

Flutter 零基础入门（三十六）：StatefulWidget 与 setState 进阶 ------ 动态页面必学

到目前为止，你已经会了：

页面跳转（Navigator）
用户输入与表单（TextField / Form）
异步操作（Future / async / await）

但是所有真实 App 都是动态的页面：

点击按钮改变状态
异步加载数据刷新界面
计数器、点赞、收藏功能

这些功能的核心就是 StatefulWidget + setState。

一、StatefulWidget 与 StatelessWidget 区别

类型	特点	使用场景
StatelessWidget	无状态，UI 一旦生成就固定	静态页面、文本展示、图标
StatefulWidget	有状态，可动态刷新 UI	交互、表单、列表更新

📌 记住：

只要 UI 会变化，一定是 StatefulWidget

二、StatefulWidget 基本写法

dart 复制代码

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('计数器')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('点击次数: $_count', style: TextStyle(fontSize: 24)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _count++;
                });
              },
              child: Text('点击增加'),
            ),
          ],
        ),
      ),
    );
  }
}

📌 关键点：

_count → 状态变量
setState(() { ... }) → 更新状态并刷新 UI

三、setState 的工作原理

1️⃣ 你修改了状态变量

2️⃣ 调用 setState

3️⃣ Flutter 框架会重新调用 build 方法

4️⃣ UI 根据新的状态重新渲染

📌 注意：

修改状态变量必须在 setState 内，或者在异步完成后调用 setState

四、异步更新状态示例

结合上一章 Future / async / await：

复制代码

class AsyncCounter extends StatefulWidget {
  @override
  _AsyncCounterState createState() => _AsyncCounterState();
}

class _AsyncCounterState extends State<AsyncCounter> {
  int _count = 0;

  Future<void> incrementLater() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('异步计数器')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('点击次数: $_count', style: TextStyle(fontSize: 24)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: incrementLater,
              child: Text('2 秒后增加'),
            ),
          ],
        ),
      ),
    );
  }
}

📌 注意：

异步操作结束后 必须用 setState 刷新 UI
否则界面不会更新

五、多个状态变量的更新

复制代码

int _count = 0;
bool _isLoading = false;

void handleClick() {
  setState(() {
    _count++;
    _isLoading = true;
  });
}

✅ setState 可以同时更新多个状态变量

六、StatefulWidget 常见坑

❌ 在 build 内直接修改状态 → 无限刷新

❌ 忘记调用 setState → UI 不刷新

❌ 异步更新状态不在 setState → UI 不刷新

❌ 创建过多 StatefulWidget → 性能问题

📌 建议：

状态变量尽量封装在 State 类内
setState 只包裹修改变量的部分

七、StatefulWidget 与 TextField / ListView 结合

输入框：用户输入 → 状态变量保存 → UI 刷新
列表：添加 / 删除 / 修改数据 → setState 刷新 ListView / GridView

📌 基本模式：

复制代码

状态变量 (State) → build 渲染 UI → 用户操作 / 异步修改状态 → setState → 重新渲染

八、本篇你真正掌握了什么？

你已经学会：

StatefulWidget 基本结构
setState 刷新 UI 原理
异步操作更新状态
多状态变量更新
与列表、输入框结合的动态 UI

📌 到这里为止：

你已经能写出完整的动态交互页面了 🎉

九、一句话总结

StatelessWidget 展示静态
StatefulWidget + setState 控制动态
异步操作也要用 setState 刷新 UI

🔜 下一篇预告

《Flutter 零基础入门（三十七）：SnackBar 与提示信息 ------ 页面反馈与用户交互必学》

下一篇我们将学习：

SnackBar 提示
AlertDialog 弹窗
用户操作后的即时反馈

🚀 动态交互能力再升级