将数据发送到Flutter中的父窗口小部件 [英] Emit the data to parent Widget in Flutter

问题描述

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

I'm trying to set the text from child widget to parent widget. But the text is not reflecting in parent widget.

也尝试使用setState（），但仍无法获得预期的结果。

Tried to use setState() also but still unable to get expected result.

以下是我的代码：

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,
      ),
    );
  }
}

我错过了什么吗？

推荐答案

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

In your example, a few assumptions were made. I will try to remove one by one.

1. 您通过了 abc 从父级到子级，然后按一下按钮即可更改子级值。由于原始类型在dart中是按值传递，因此子级 abc 的值更改不会更改父级 abc 。请参见下面的代码段。

1. You pass abc from parent to child and you mutated the child value on press on button. As primitive types are pass by value in dart, change in the value of abc in child will not change the value of parent abc. Refer the below snippet.

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

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

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

Let's assume the first one is wrong(for understanding purpose). Then changing the value of abc in child will change the value of abc in parent. But without calling that inside setState of parent, parent will not reflect the change. In your case if you change the code as below, it will change the button text alone on click (as setState of child is called).

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

而不是使用 globalState 随着应用的增长，这将很难维护/调试，我建议使用回调。请参考以下代码。

Instead of using globalState which will be very difficult to maintain/debug as app grows, I would recommend using callbacks. Please refer the below code.

    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,
          ),
        );
      }
    }

这篇关于将数据发送到Flutter中的父窗口小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！