当前位置：首页 > news >正文

Flutter：StatelessWidget vs StatefulWidget — 到底该怎么选？ - 指南

news 2026/6/11 19:01:54

1. 开场：为什么要讲这个？

80% 的 Flutter 初学者都搞不清楚 “什么时候用 Stateless？什么时候用 Stateful？”

写着写着就全变成 StatefulWidget。
页面卡顿其实不是 Flutter 性能问题，而是 写法影响 rebuild 范围。
Flutter 最大的思想：UI = 函数(state)。

2. StatelessWidget — 无状态组件

✅ 定义

UI 仅由 外部传入的数据 决定，自身不保存状态。

特点

特性	说明
无内部状态	没有 setState
可 `const`	直接复用，减少 rebuild
更轻量	构建快，生命周期简单

生命周期

build()

什么时候用？

页面展示 UI，不需要在本组件内改变状态
数据变化靠 父组件传参或状态管理（Riverpod / Provider / Bloc）

示例

class UserAvatar extends StatelessWidget {final String url;const UserAvatar(this.url);@overrideWidget build(BuildContext context) {return Image.network(url);}
}

3. StatefulWidget — 有状态组件

✅ 定义

有一个 State 对象保存状态，需要更新 UI 时调用 setState()。

特点

特性	说明
自己保存状态	用 setState 更新 UI
有生命周期	有 init / dispose
用于交互逻辑	表单、滚动、动画、输入框控制器等

生命周期（简）

createState()
initState()
didChangeDependencies()
build()   <-- 可以调用很多次
dispose()

示例：计数器

class Counter extends StatefulWidget {@overrideState createState() => _CounterState();
}
class _CounterState extends State {int count = 0;@overrideWidget build(BuildContext context) {return ElevatedButton(onPressed: () => setState(() => count++),child: Text("count = $count"),);}
}

4. 关键对比

对比点	StatelessWidget	StatefulWidget
是否保存状态	❌ 不保存	✅ 保存
UI 是否可更新	✅ 外部变化可更新	✅ 内部随时更新
生命周期	简单	拥有完整生命周期
性能与稳定性	✅ 更好	⚠️ 控制不好会 rebuild 太多
推荐使用场景	展示型 UI	交互/动画/控制器/表单等

5. 小总结：怎么选？

不要因为会 setState 就全部用 StatefulWidget。

流程图：

是否需要内部保存状态？└── No → StatelessWidget└── Yes → StatefulWidget

进一步细分：

✅ 局部状态 → Stateful
✅ 跨组件状态 → Riverpod / Bloc
✅ UI 仅依赖外部数据 → Stateless (能 const 就 const)

6. 实战：用 Stateless + Riverpod 代替 Stateful

class UserNameText extends ConsumerWidget {@overrideWidget build(BuildContext context, WidgetRef ref) {final name = ref.watch(userProvider);return Text(name);}
}

数据和 UI 解耦：UI 变成 Stateless，状态交给 Riverpod/Bloc。

7. 常见误区与最佳实践

错误	说明
✅ 全部用 Stateful	太多 setState 会导致不必要的 rebuild
✅ 把 Controller 放 build() 里	会不断创建/销毁，导致内存泄漏
✅ 不写 dispose()	控制器没释放，会泄漏

最佳实践：

@override
void initState() {super.initState();controller = TextEditingController();
}
@override
void dispose() {controller.dispose();super.dispose();
}