为什么父 StatefulWidget 中的 setState 不更新子 StatefulWidget
Why setState in parent StatefulWidget do not update child StatefulWidget
我知道,从父 StatefulWidget 更新子 StatefulWidget 的正确方法是使用子 GlobalKey 实例。
但我不明白,为什么 setState(() {}) 不这样做!我没有找到任何关于此的文档或解释。
Calling setState notifies the framework that the internal state of
this object has changed in a way that might impact the user interface
in this subtree, which causes the framework to schedule a build for
this State object.
If you just change the state directly without calling setState, the
framework might not schedule a build and the user interface for this
subtree might not be updated to reflect the new state.
通过文档,我希望整个小部件子树都会更新。但它没有。
请解释一下,为什么下面的示例无法按预期工作(更改 ChildStatefulWidget 的文本)。
谢谢!
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class ParentStatefulWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return ParentState();
}
}
class ParentState extends State<ParentStatefulWidget> {
int counter = 0;
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
child: Container(
color: Colors.lightBlue,
padding: EdgeInsets.all(10),
child: Text(
"Tap me",
style: TextStyle(color: Colors.white, fontSize: 24),
)),
onTap: () {
setState(() {
counter = counter + 1;
});
},
),
ChildStatefulWidget(
text: "Count: $counter",
)
],
);
}
}
class ChildStatefulWidget extends StatefulWidget {
final String text;
ChildStatefulWidget({Key key, this.text = ""}) : super(key: key);
@override
State<StatefulWidget> createState() {
return ChildState(text);
}
}
class ChildState extends State<ChildStatefulWidget> {
final String text;
ChildState(this.text);
@override
Widget build(BuildContext context) {
return Text(
text,
style: TextStyle(fontSize: 18),
);
}
}
您不需要在 childState 中创建“文本”——只需使用“widget.text”:
class ChildState extends State<ChildStatefulWidget> {
@override
Widget build(BuildContext context) {
return Text(
widget.text,
style: TextStyle(fontSize: 18),
);
}
}
您的代码不起作用,因为您发送值抛出构造函数,但每次更改状态时构造函数都不会调用。所以得到的抛出构造函数值没有改变。
我知道,从父 StatefulWidget 更新子 StatefulWidget 的正确方法是使用子 GlobalKey 实例。
但我不明白,为什么 setState(() {}) 不这样做!我没有找到任何关于此的文档或解释。
Calling setState notifies the framework that the internal state of this object has changed in a way that might impact the user interface in this subtree, which causes the framework to schedule a build for this State object.
If you just change the state directly without calling setState, the framework might not schedule a build and the user interface for this subtree might not be updated to reflect the new state.
通过文档,我希望整个小部件子树都会更新。但它没有。
请解释一下,为什么下面的示例无法按预期工作(更改 ChildStatefulWidget 的文本)。 谢谢!
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class ParentStatefulWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return ParentState();
}
}
class ParentState extends State<ParentStatefulWidget> {
int counter = 0;
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
child: Container(
color: Colors.lightBlue,
padding: EdgeInsets.all(10),
child: Text(
"Tap me",
style: TextStyle(color: Colors.white, fontSize: 24),
)),
onTap: () {
setState(() {
counter = counter + 1;
});
},
),
ChildStatefulWidget(
text: "Count: $counter",
)
],
);
}
}
class ChildStatefulWidget extends StatefulWidget {
final String text;
ChildStatefulWidget({Key key, this.text = ""}) : super(key: key);
@override
State<StatefulWidget> createState() {
return ChildState(text);
}
}
class ChildState extends State<ChildStatefulWidget> {
final String text;
ChildState(this.text);
@override
Widget build(BuildContext context) {
return Text(
text,
style: TextStyle(fontSize: 18),
);
}
}
您不需要在 childState 中创建“文本”——只需使用“widget.text”:
class ChildState extends State<ChildStatefulWidget> {
@override
Widget build(BuildContext context) {
return Text(
widget.text,
style: TextStyle(fontSize: 18),
);
}
}
您的代码不起作用,因为您发送值抛出构造函数,但每次更改状态时构造函数都不会调用。所以得到的抛出构造函数值没有改变。