dart - 将数据发送到Flutter中的父窗口小部件

我正在尝试将文本从子窗口小部件设置为父窗口小部件。但是该文本未反射(reflect)在父窗口小部件中。

试图也使用setState()但仍然无法获得预期的结果。

以下是我的代码:

void main() => runApp(new TestApp());

class TestApp extends StatefulWidget {
  @override
  _TestState createState() => new _TestState();
}

class _TestState extends State<TestApp>{

  String abc = "";

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new Column(
          children: <Widget>[
            new Text("This is text $abc"),
            TestApp2(abc)
          ],
        ),
      ),
    );
  }
}


class TestApp2 extends StatefulWidget {

  String abc;

  TestApp2(this.abc);

  @override
  _TestState2 createState() => new _TestState2();
}

class _TestState2 extends State<TestApp2>{
  @override
  Widget build(BuildContext context) {
    return new Container(
      width: 150.0,
      height: 30.0,
      margin: EdgeInsets.only(top: 50.0),
      child: new FlatButton(
          onPressed: (){
            setState(() {
              widget.abc = "RANDON TEXT";
            });
          },
        child: new Text("BUTTON"),
        color: Colors.red,
      ),
    );
  }
}

我想念什么吗？

最佳答案

在您的示例中，进行了一些假设。我将尝试一一删除。

您将abc从父级传递给子级，然后在按下按钮时更改了子级值。由于基本类型是dart中的通过值传递，因此更改child中abc的值将不会更改父abc的值。请引用以下代码段。

void main() {
  String abc = "oldValue";
  changeIt(abc);
  print(abc); // oldValue
}

void changeIt(String abc) {
  abc = "newValue";
  print(abc); //newValue
}

我们假设第一个是错误的(出于理解目的)。然后，在子级中更改abc的值将在父级中更改abc的值。但是，如果不在父对象的setState内部调用它，父对象将不会反射(reflect)该更改。在您的情况下，如果您按以下方式更改代码，则它将仅在单击时更改按钮文本(因为调用child的setState)。

  new FlatButton(
    onPressed: () {
      setState(
        () {
          widget.abc = "RANDON TEXT";
        },
      );
    },
    child:
        new Text(widget.abc), // setting the text based on abc
    color: Colors.red,
  ),

我建议您使用globalState，而不是使用callbacks，因为随着应用程序的增长，它将很难维护/调试。请引用下面的代码。

    void main() => runApp(new TestApp());

    class TestApp extends StatefulWidget {
      @override
      _TestState createState() => new _TestState();
    }

    class _TestState extends State<TestApp> {
      String abc = "bb";

      callback(newAbc) {
        setState(() {
          abc = newAbc;
        });
      }

      @override
      Widget build(BuildContext context) {
        var column = new Column(
          children: <Widget>[
            new Text("This is text $abc"),
            TestApp2(abc, callback)
          ],
        );
        return new MaterialApp(
          home: new Scaffold(
            body: new Padding(padding: EdgeInsets.all(30.0), child: column),
          ),
        );
      }
    }

    class TestApp2 extends StatefulWidget {
      String abc;
      Function(String) callback;

      TestApp2(this.abc, this.callback);

      @override
      _TestState2 createState() => new _TestState2();
    }

    class _TestState2 extends State<TestApp2> {
      @override
      Widget build(BuildContext context) {
        return new Container(
          width: 150.0,
          height: 30.0,
          margin: EdgeInsets.only(top: 50.0),
          child: new FlatButton(
            onPressed: () {
              widget.callback("RANDON TEXT"); //call to parent
            },
            child: new Text(widget.abc),
            color: Colors.red,
          ),
        );
      }
    }

关于dart - 将数据发送到Flutter中的父窗口小部件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51463906/