如何在父setState()上重新构建文本小部件

Question

当在小部件状态下调用setState时，元素树中相应的元素被标记为脏元素，小部件被重新构建。然而，它如何处理后代呢?例如，下面的Text小部件在其祖先SampleWidgetState被重建时被重建。

为什么?

class SampleWidget extends StatefulWidget {
@override
SampleWidgetState createState() => SampleWidgetState();
}
class SampleWidgetState extends State<SampleWidget> {
String text = "text1";
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(text),
ElevatedButton(
child: Text('call SetState'),
onPressed: () {
setState(() {
text = "text2";
});
},
),
],
);
}
}

Answer 1

来自Flutter的官方文档，在Flutter内部:

在响应用户输入(或其他刺激)时，元素可能变得不干净，例如，如果开发人员在相关的状态对象上调用setState()。框架保留了一个脏元素列表，并在构建阶段直接跳转到它们，跳过干净元素。在构建阶段，信息沿着元素树单向流动，这意味着每个元素在构建阶段最多访问一次。一旦被清理，元素就不会再脏了，因为通过归纳，它的所有祖先元素也是干净的。

我猜这回答了Flutter在小部件后代的更新过程中所做的事情。

Answer 2

SampleWidgetState是一个状态类，当您调用setState()时，它的平均build()方法将被重新调用，内部的所有内容将被重建。这就是它的工作原理。

如果您想防止后代不重建，有几种方法，

1. 使用const关键字
2. 扭曲你想要改变自己状态的小部件，例如使用StatefullBuilder
3. 将widget重构为statfulwidget，使其拥有自己的状态

在你的例子中，Text小部件消耗SampleWidgetState:String text = "text1";，它的平均文本小部件不是独立的，它依赖于那个状态。