有状态与无状态的区别如何影响何时重建小部件?

Question

我试图了解状态和提升状态在 Flutter 中的工作原理。在下面的代码中，我制作了一个简单的应用程序，我尝试通过多个级别传递或提升字符串和函数。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String data = 'MyApp class data';
void setTextField(String s) {
setState(
() {
data = s;
},
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MainApp(data, setTextField),
);
}
}
class MainApp extends StatelessWidget {
final String mainAppData;
final Function setTextField;
MainApp(this.mainAppData, this.setTextField);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(mainAppData)),
body: Container(
child: Level2(mainAppData, setTextField),
),
);
}
}
class Level2 extends StatelessWidget {
final String level2Data;
final Function setTextField;
Level2(this.level2Data, this.setTextField);
@override
Widget build(BuildContext context) {
return Container(
child: Level3(level2Data, setTextField),
);
}
}
class Level3 extends StatefulWidget {
final String level3Data;
final Function setTextField;
Level3(this.level3Data, this.setTextField);
@override
_Level3State createState() {
print('Level3: $this.level3Data');
return _Level3State(this.level3Data, this.setTextField);
}
}
class _Level3State extends State<Level3> {
String level3Data;
Function setTextField;
_Level3State(this.level3Data, this.setTextField);
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
TextField(
onChanged: setTextField,
),
Text(level3Data),
],
);
}
}

当应用启动时，_MyAppState状态类中的字符串data将在生成MainApp时传递给MainAppStatelessWidget。以类似的方式，信息随后传递到Level2StatelessWidget 和Level3StatefulWidget。

当Level3中的TextField发生变化时，将触发setTextField。setTextField是在MyApp中定义的，我认为当字符串data发生变化时(setState()内部(，它应该触发受更改影响的所有小部件的重建。

MainApp小部件 (appBar( 中的文本发生了变化，显示MainApp已按预期重建。但是Level3小部件没有任何变化;它没有重建。createState()方法中的 print 语句不会执行，并且"文本"构件的文本不会更改。

为什么Level3StatefulWidget 不重建？

Answer 1

在我的理解中，有状态小部件 Level3 已经在树中的给定位置创建。 并且根据有状态小部件的合约， 小部件实现者有责任确保在状态更改时使用 State.setState 及时通知状态。 因此，在您的情况下，您需要在 level3 中设置状态才能再次收到更改通知。 重建仅在级别 1 进行，因为调用 setState。

重建过程以递归方式继续，直到用户界面的描述完全具体。 在级别 3 中，类有自己的一组字段 字符串级别3数据; 函数集文本字段; 这意味着这些需要再次使用 SetState 进行设置，或者如果您执行类似操作，则小部件构建将继续。

class Level3 extends StatefulWidget {
final String level3Data;
final Function setTextField;
Level3(this.level3Data, this.setTextField);
@override
_Level3State createState() {
print('Level3: $this.level3Data');
return _Level3State();
}
}
class _Level3State extends State<Level3> {
// String level3Data;
// Function setTextField;
@override
Widget build(BuildContext _) {
return Column(
children: <Widget>[
TextField(
onChanged: widget.setTextField,
),
Text(widget.level3Data),
],
);
}
}