了解 Flutter 中 StatefulWidget 的使用

Posted 2023-02-23

【中文标题】了解 Flutter 中 StatefulWidget 的使用

【英文标题】：Understanding the use of StatefulWidget in Flutter

【发布时间】：2018-11-28 21:17:49

【问题描述】：

我刚开始玩 Flutter，我无法理解 StatefulWidget 的意思。我在教程等中看到的所有这些小部件都在实例化 State<MyWidget> 并让它完成所有工作。 比如来自this（官方）教程：

class RandomWords extends StatefulWidget 
  @override
  createState() => new RandomWordsState();

class RandomWordsState extends State<RandomWords> 
  ...

我想知道的是为什么要这样构建以及外部类的用途是什么（在我的示例中为RandomWords）。

提前致谢。

【参考方案1】：

“外部类”是final，每个小部件都是final（不可变）。这意味着它的所有属性也必须是final：

class RandomWords extends StatefulWidget 
  final String name;

  @override
  createState() => new RandomWordsState();


class RandomWordsState extends State<RandomWords> 
  String name;

  @override
  void initState() 
    name = widget.name;
    super.initState();
  

  @override
  Widget build(BuildContext context) => Text(name);

  void someMethod() 
    print(widget.name);
    setState(() => name = 'new name');
  

从 State 可以访问 StatefulWidget 的所有字段并且显然没有改变因为他们是final。

但是，

State 可以更改数据。 setState 将执行其回调，然后重建 State（使用新数据）。

StatelessWidget's 也可以重建，即当它的父级正在重建时，但所有状态都丢失并且没有数据保留。这就是State 的用途。

【参考方案2】：

在 Flutter 构建 UI 时，我们主要使用两种类型的小部件，StatelessWidget 和 StatefulWidget。 有状态小部件用于当小部件的值（状态）变化或具有可随时间变化的可变状态。

一些重要的有状态的属性小部件

有状态小部件是可变的。它跟踪状态。 有状态小部件的 build() 方法被多次调用。 它会在其生命周期内多次重建。

一些有状态的示例小部件

复选框：无论复选框是否被选中，都保持其状态。

Radio：无论是否被选中，都保持其状态。

class MyStatefulWidget extends StatefulWidget 
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
  

class _MyStatefulWidgetState extends State<MyStatefulWidget> 
@override
Widget build(BuildContext context) 
return Container();

有状态小部件由两个类声明，StatefulWidget 类和State 类。 StatefulWidget 类会在小部件的配置发生变化时重建，但 State 类可以保持（保留）。

例如，当状态改变时，小部件会被重建。如果 StatefulWidget 从树中移除，然后在一段时间后重新插入树中，则会创建一个新的 State 对象。

【参考方案3】：

据我了解，这是为了保存有关小部件的信息。因此，您每次要保存变量或其他内容时都执行 setState 。请参阅有关在 Flutter 中添加交互性的教程。

【讨论】：

为什么我需要两个类？

【参考方案4】：

无状态小部件就像恒定显示， 只喜欢展示一些东西 有状态用于可变显示，我的意思是如果该屏幕中的任何值必须更改，那么它应该是有状态的