如何从子 Widget 更新父 Widget 的状态，同时更新 Flutter 中子 Widget 的状态？

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

欢迎来到颤振！看来您没有将回调传递到子小部件中。实例化 ChildWidget 时，您应该执行以下操作。然后您可以通过属性访问类中new ChildWidget(callback: this.callback);的值，例如。StatefulWidgetState<ChildWidget>widgetwidget.callback

另外，值得注意的是，您应该尽力避免使用该Function类型，因为它并没有真正提供有关 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');
      },
    );
  }
}