如何从其他 Widget 获取数据？答案

【问题标题】：How I can get data from other Widget?如何从其他 Widget 获取数据？
【发布时间】：2019-02-02 05:25:51
【问题描述】：

我想从特定的小部件中获取数据，我搜索存在 SQLite 或 SharePreferences 但我想不需要。

我想要的是当我点击事件 onTap 时，在我的情况下是一个 String 并在父小部件中获取 String 的值。我知道如何将数据从父小部件传递给子小部件，但不能反向传递。

例如：!1

当我按下例如“Journey UNI”时，保存该字符串并在父小部件中获取它：

【问题讨论】：

你能举个例子来说明你想要达到的目标吗？

标签： dart flutter

【解决方案1】：

我们可以使用 callbacks 让子小部件与父小部件对话。请参考this 示例。这里RootPage 是父级，FeedPage 是子级。

【讨论】：

【解决方案2】：

您可以让您的父母将回调函数传递给您的子小部件。然后在子小部件中，当您想将值传回给父级时，您可以使用该值调用回调。

...
ParentWidget(
    child: ChildWidget(
        onSelectParam: (String param) {
            // do something with param
        }
    ),
)
...


class ChildWidget extends StatelessWidget {
    ChildWidget({this.onSelectParam});

    String yourParam;
    Function(String) onSelectParam;

    @override
    Widget build(BuildContext context) {
        return InkWell(
            onTap: () {
                onSelectParam(yourParam);
            },
            child: ...
        );
    }
}

【讨论】：

谢谢大家，在我的情况下，第二个小部件在其他存档中，所以它可以使用相同的参数？
“其他存档”是什么意思？你的意思是它在另一个文件/目录中？如果是，那么没关系，它应该仍然有效。
我是 Flutter 的新手，如果我说错了，非常抱歉。我在一个文件中有一个小部件，里面有其他小部件，代码在其他文件中。为此，我知道从我调用的小部件中获取参数非常容易
没问题，那么你可以使用我提出的解决方案，小部件是否在不同的文件中都没关系。
这是一个很好的解释。它真的帮助了我。谢谢！

【解决方案3】：

使用回调在小部件之间传递/接收数据

例如，您声明一个回调和一个模型类，其中包含您要传递给子小部件的数据。以下是子小部件的代码

class CustomerInformation extends StatefulWidget {
  CustomerInformation({Key key, this.paymentModel, this.onContinue})
      : super(key: key);

  final VoidCallback onContinue;
  final PullPaymentData paymentModel;

  @override
  State<StatefulWidget> createState() {
    return _CustomerInformationState();
  }
}

    class _CustomerInformationState extends State<CustomerInformation> {
//useless code omitted
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
              child: RaisedButton(
                onPressed: () async {
                    widget.onContinue();
                  }
                },
                child: Text(
                  Translations.of(context).sendOtpButton,
                ),
              ),
            ),
//useless code omitted
  }

paymentModel 将作为 Ref 传递，并且当上面代码中的 RaisedButton 被按下时，控制权被转移回调用者（父级），它接收更新的模型：

以下是调用上述小部件的调用者（父）小部件的示例代码

    class _PullPaymentScreenState extends State<PullPaymentScreen> {
  PullPaymentData model = PullPaymentData(
      identifier: "", isSendOtpSuccess: false, amount: "", currentStep: 0);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: getAppBar(),
        body: Builder(builder: (BuildContext context) {
          return Column(
            children: <Widget>[
              model.currentStep == 0
                  ? CustomerInformation(
                      paymentModel: model,
                      onContinue: () {
//i recieve updated model HERE
                        setState(() {
                          if (model.isSendOtpSuccess) { 
                            ++model.currentStep;
                            Scaffold.of(context).showSnackBar(SnackBar(
                                  content:
                                      Text(Translations.of(context).otpSuccess),
                                  duration: Duration(seconds: 4),
                                ));
                          }
                        });
                      })
                  : SubmitPayment(
                      identifier: model.identifier,
                      amount: model.amount,
                      onResendPressed: () {
                        setState(() {
                          --model.currentStep;
                        });
                      },
                    ),
            ],
          );
        }));
  }

【讨论】：

【解决方案4】：

简单类型可以参考@tudorprodan

如果您想获取您创建的包含 textField 的小部件的值，则将 TextEditingController 传递给小部件的构造函数。因此，您可以使用小部件外部的控制器来获取值。另外，记得在完成后处理控制器。

【讨论】：