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 基本写法classCounterPageextendsStatefulWidget{override_CounterPageStatecreateState()_CounterPageState();}class_CounterPageStateextendsStateCounterPage{int _count0;overrideWidgetbuild(BuildContextcontext){returnScaffold(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️⃣ 调用setState3️⃣ Flutter 框架会重新调用build方法4️⃣ UI 根据新的状态重新渲染 注意修改状态变量必须在 setState 内或者在异步完成后调用 setState四、异步更新状态示例结合上一章 Future / async / awaitclass AsyncCounter extends StatefulWidget { override _AsyncCounterState createState() _AsyncCounterState(); } class _AsyncCounterState extends StateAsyncCounter { int _count 0; Futurevoid 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 弹窗用户操作后的即时反馈动态交互能力再升级
)
