[英]Modify value in statefull child widget from its statefull parent
I have two widgets.我有两个小部件。 Both are stateful widgets.I put a button and Child widget in HomePage widget.
两者都是有状态的小部件。我在主页小部件中放置了一个按钮和子小部件。 I want to change counter variable in Child widget from HomePage widget when click on button in HomePage widget.
当单击 HomePage 小部件中的按钮时,我想从 HomePage 小部件更改 Child 小部件中的计数器变量。 I should use setState method for that but I can't call it outside from Child widget.What is the proper way to do that?
我应该为此使用 setState 方法,但我不能从 Child 小部件外部调用它。这样做的正确方法是什么?
Parent家长
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Child(),
FlatButton(
onPressed: () {
//Increase Child widget's counter variable
},
child: Text("Button In Parent"),
color: Colors.amber,
)
],
),
);
}
}
Child孩子
class Child extends StatefulWidget {
@override
_ChildState createState() => _ChildState();
}
class _ChildState extends State<Child> {
int counter = 0;
@override
Widget build(BuildContext context) {
return Container(
color: Colors.green,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Text In Child: ',
style: TextStyle(fontSize: 30),
),
Text(
//Increase this variable from parent
counter.toString(),
style: TextStyle(fontSize: 50),
),
],
),
),
);
}
}
You have to use FlatButton and setState in same class otherwise you can not access the class variable, Use the code below and try to understand logic of setState.您必须在同一个 class 中使用 FlatButton 和 setState 否则您无法访问 class 变量,使用下面的代码并尝试理解 setState 的逻辑。 Have a good day.
祝你有美好的一天。
class Child extends StatefulWidget {
@override
_ChildState createState() => _ChildState();
}
class _ChildState extends State<Child> {
int counter = 0;
@override
Widget build(BuildContext context) {
return Container(
color: Colors.green,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Text In Child: ',
style: TextStyle(fontSize: 30),
),
Text(
//Increase this variable from parent
counter.toString(),
style: TextStyle(fontSize: 50),
),
Expanded(
child:Container(
color:Colors.white,
child:FlatButton(
onPressed(){
setState((){
counter=counter+1;
});
};
),
),
),
],
);
}
}
You can use the setState
of the parent widget to rebuild the child widget.您可以使用父窗口小部件的
setState
来重建子窗口小部件。 Initialize a counter variable in the parent widget and increment it and call setState
.在父窗口小部件中初始化一个计数器变量并将其递增并调用
setState
。
In the onTap
of your FlatButton
in parent widget在父小部件中
FlatButton
的onTap
setState(() {
counter++;
});
Let the Child
widget take this as a parameter Child(counts: counter)
让
Child
小部件将此作为参数Child(counts: counter)
class Child extends StatefulWidget {
final int counts;
Child({this.counts});
@override
_ChildState createState() => _ChildState();
}
and display it in the Text
in your Child
并将其显示在您
Child
的Text
中
Text(
widget.counts.toString(),
style: TextStyle(fontSize: 50),
),
This is one way of doing it.这是一种方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.