StatelessWidget 和 StatefulWidget 之间有什么区别？

Question

Accepted Answer

Flutter 有两种基本的 widget 类型：**StatelessWidget**（不可变，没有会改变的内部状态）和 **StatefulWidget**（可以持有和更新可变状态，当状态改变时重新构建）。选择正确的类型是构建 Flutter UI 的基础。 ## StatelessWidget — 没有变化的状态 ```dart // a StatelessWidget: just describes UI based on its inputs (immutable, no internal state) class Greeting extends StatelessWidget { final String name; const Greeting(this.name); @override Widget build(BuildContext context) { return Text('Hello, $name'); // UI depends only on inputs, never changes itself } } // → use for UI that doesn't change on its own (static content, displays based on inputs) ``` ## StatefulWidget — 有可变状态 ```dart // a StatefulWidget: holds STATE that can change → rebuilds the UI when it does class Counter extends StatefulWidget { @override State createState() => _CounterState(); } class _CounterState extends State { int count = 0; // mutable STATE @override Widget build(BuildContext context) { return Column(children: [ Text('Count: $count'), ElevatedButton( onPressed: () => setState(() => count++), // setState → rebuild with new state child: Text('Increment'), ), ]); } } ``` ## setState — StatefulWidget 的关键 ```text → setState(() { ... }) tells Flutter the state CHANGED → triggers a REBUILD (build() runs again with the new state, updating the UI) → WITHOUT setState, changing a variable won't update the UI → StatefulWidget = widget config (immutable) + a State object (holds mutable state) ``` ## 选择 ```text STATELESS → UI based purely on inputs; doesn't change itself (most widgets; simpler) STATEFUL → needs to hold/change internal state over time (counters, forms, toggles, animations, anything interactive that changes) → Prefer Stateless when possible (simpler); use Stateful when you need changing state. ``` ## 为什么这很重要理解 StatelessWidget 和 StatefulWidget 之间的区别对于 Flutter 开发至关重要，因为选择正确的类型对于构建可工作的 UI 至关重要，因此这是必须掌握的基础知识。这个区别——**StatelessWidget**（不可变，描述 UI 纯粹基于其输入，永远不会自己改变）与 **StatefulWidget**（持有可以改变的可变状态，当状态改变时重新构建 UI）——是 Flutter 中第一个也是最重要的概念之一，决定了你如何构建任何 widget。理解 **StatelessWidget** 适合不会改变自身的 UI（静态内容、基于输入的显示——大多数 widget，并且更简单），而 **StatefulWidget** 用于任何具有可变内部状态的内容（计数器、表单、切换开关、交互元素），这对于正确选择至关重要。最关键的是，理解 **setState** ——告诉 Flutter 状态已改变的机制，触发重新构建使 UI 更新的机制（以及不使用它，改变变量不会更新 UI，这是一个非常常见的初学者错误）——对于使 StatefulWidget 正常工作至关重要。理解 StatefulWidget 将不可变的 widget 配置与保存可变状态的单独 State 对象相结合，这澄清了它的结构。 **优先使用 StatelessWidget**（更简单）的指导原则，并且仅在需要改变状态时使用 StatefulWidget，这反映了最佳实践。由于你构建的几乎每个 Flutter widget 都是这两种类型之一，并且正确选择（并正确使用 setState）对于构建功能性的、交互式的 UI 至关重要，所以理解 StatelessWidget 与 StatefulWidget ——它们的区别、何时使用每一个，以及 setState 的关键作用——是必不可少的、基础性的 Flutter 知识，是 Flutter 开发中最基本的概念之一，每个 Flutter 开发者都必须理解它才能构建可工作的用户界面。