如何从其子小部件更新父小部件的状态，同时在 Flutter 中更新子控件的状态？

Question

我想请你帮忙。

我下面的示例代码旨在从子小部件更新父小部件的状态，同时更新子小部件的状态。父窗口小部件的文本值将更新，同时也会更改子小部件按钮的颜色。

import 'package:flutter/material.dart';
void main() => runApp(AppIndex());
class AppIndex extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: ParentWidget());
}
}
class ParentWidget extends StatefulWidget {
@override
_ParentWidgetState createState() => _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {
String _textValue = 'Old Value';
callback(newValue){
setState(() {
_textValue = newValue;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Text(_textValue),
ChildWidget(),
],
);
}
}
class ChildWidget extends StatefulWidget {
String textValue;
Function callback;
ChildWidget({this.textValue, this.callback});
@override
_ChildWidgetState createState() => _ChildWidgetState();
}
class _ChildWidgetState extends State<ChildWidget> {
bool buttonState = false;
@override
Widget build(BuildContext context) {
return RaisedButton(
color: buttonState == true ? Colors.greenAccent : Colors.redAccent,
child: Text('Update State'),
onPressed: () {
setState(() {
if (buttonState == false) {
buttonState = true;
} else if (buttonState == true) {
buttonState = false;
}
});
widget.callback('New Value');
},
);
}
}

到目前为止，这能够做的是更新子小部件的颜色/状态，但是，父小部件似乎没有更新其状态。我的原始代码，这是从中获取的，实际上只更新父级的状态，而不是同时更新父级和子级(相同的概念和关注点(。

上面的示例代码是我在这里询问之前初步研究结果的衍生品。

我认为我构建代码的方式一定有问题，或者基于我制作方式的 Flutter 架构无法做到这一点。如果可能的话，你能给我你对具有相同行为的东西的建议吗？(更新父状态和子状态(

抱歉，我是这种类型的编程和架构的新手。

Answer 1

欢迎来到 Flutter！似乎您没有将回调传递到子小部件中。在实例化 ChildWidget 时，您应该new ChildWidget(callback: this.callback);然后您可以使用widget属性从State<ChildWidget>类的StatefulWidget访问值，例如widget.callback.

此外，值得注意的是，您应该尽量避免使用Function类型，因为它并没有真正提供有关函数将返回什么或它将作为参数的信息。为此，Dart使用typedef关键字。例如，对于一个接受日期字符串并返回日期的函数(鉴于 Darts 对日期的出色内置支持，这是一个有点人为的示例(，您可以执行以下操作：

typedef Date StringToDateParser(String datestring);

然后，在您的类中，您可以将StringToDateParser用作类型。

import 'package:flutter/material.dart';
void main() => runApp(AppIndex());
class AppIndex extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: ParentWidget());
}
}
class ParentWidget extends StatefulWidget {
@override
_ParentWidgetState createState() => _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {
String _textValue = 'Old Value';
callback(newValue){
setState(() {
_textValue = newValue;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Text(_textValue),
ChildWidget(callback: this.callback, this._text),
],
);
}
}
class ChildWidget extends StatefulWidget {
Function callback;
ChildWidget({this.textValue, this.callback});
@override
_ChildWidgetState createState() => _ChildWidgetState();
}
class _ChildWidgetState extends State<ChildWidget> {
bool buttonState = false;
_ChildWidgetState();
@override
Widget build(BuildContext context) {
return RaisedButton(
color: buttonState == true ? Colors.greenAccent : Colors.redAccent,
child: Text('Update State'),
onPressed: () {
setState(() {
if (buttonState == false) {
buttonState = true;
} else if (buttonState == true) {
buttonState = false;
}
});
widget.callback('New Value');
},
);
}
}