从Flutter中的有状态小部件返回数据 [英] Returning data from a Stateful Widget in Flutter

问题描述

我以前发布过有关此问题的信息，但我仍然会遇到该问题它将数据从有状态小部件返回到无状态小部件

I have previously posted about this problem I am still facing Which is to return data from a Stateful widget back to a Stateless Widget

我正在使用的小部件是DateTimePickerFormField小部件，我将其用作有状态小部件中的子级

The Widget I am using is DateTimePickerFormField widget and I am using it as a child in a stateful widget

所以我看过 https://flutter.io/docs/cookbook/navigation/returning-data#complete-example

用于从小部件返回数据.但是，返回数据的小部件是无状态的小部件...在我的情况下不是

For returning data from a widget. However, the widget that is returning the data is a stateless widget ...Which in my case isn't

所以代码如下

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Add a Reminder'),

      ),
      body:
      new Container(
        padding: new EdgeInsets.all(20.0),
        child: new Form(
            child: new ListView(
              children: <Widget>[

            new TextFormField(
            keyboardType: TextInputType.text,
              // Use email input type for emails.
              decoration: new InputDecoration(
                hintText: 'Title of reminder',
              ),

            ),
            dateAndTimeWidget(context),
            RaisedButton(
            child: Text('Save'),
        onPressed: () {
          Navigator.pop(context);
        },
      )
      ],
    ),)
    ,
    )
    ,
    );

  }

该小部件正在调用方法:dateAndTimeWidget，该方法应返回有状态的dateTime小部件并将结果数据保存在变量中:

That Widget is calling the method: dateAndTimeWidget, Which is supposed to return the dateTime stateful widget and save the outcoming data in a variable :

 dateAndTimeWidget(BuildContext context) async {
    final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context)=> dateTime()),
    );

}

然后这是dateTime Statful小部件

Then This is the dateTime Statful widget

class dateTime extends StatefulWidget{
    @override
  dateTimeState createState() => dateTimeState();

}
class dateTimeState extends State<dateTime>{

  static DateTime dateT;

  InputType inputType = InputType.both;

  final formats = {
    InputType.both: DateFormat("EEEE, MMMM d, yyyy 'at' h:mma"),
    InputType.date: DateFormat('yyyy-MM-dd'),
    InputType.time: DateFormat("HH:mm"),
  };

  Widget build(BuildContext context) => Container(
      child: DateTimePickerFormField(
        inputType: InputType.both,
        editable: true,
        format: formats[inputType],
        decoration: InputDecoration(
            labelText: 'Date/Time', hasFloatingPlaceholder: false),
        onChanged: (dt) {
          setState(() => dateT = dt);
          Navigator.of(context).pop(dateT);
        },

      )


  );


}

我还没有使用值结果因为错误是我永远都没有进入添加提醒页面，并且说结果推送导航方法指向null

I am not using the value result yet Because the error is that I never get to the add reminder page and it says that the result push navigation method is pointing at null

推荐答案

在这种情况下，不适合使用Navigator传递数据.因为页面和您的 dateTime 小部件之间没有页面过渡.我建议您实现 ValueChanged 回调以在同一屏幕的小部件之间传递数据.

In this situation passing data with Navigator is not suitable. Because there isn't page transition between the page and your dateTime Widget. I recommend you to implement ValueChanged callback to pass data between widgets in same screen.

有点棘手.但是 material.dart 的小部件经常使用这种技术.我希望这能帮到您！

It's little bit tricky. But material.dart's widgets often use this technique. I hope this will help you!

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime dateT;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Add a Reminder'),
      ),
      body: new Container(
        padding: new EdgeInsets.all(20.0),
        child: new Form(
          child: new ListView(
            children: <Widget>[
              new TextFormField(
                keyboardType: TextInputType.text,
                // Use email input type for emails.
                decoration: new InputDecoration(
                  hintText: 'Title of reminder',
                ),
              ),
              dateTime(
                onDateTimeChanged: (newDateTime) {
                  dateT = newDateTime;
                },
              ),
              RaisedButton(
                child: Text('Save'),
                onPressed: () {
                  Navigator.pop(context);
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

class dateTime extends StatefulWidget {
  final ValueChanged<DateTime> onDateTimeChanged;

  dateTime({Key key, this.onDateTimeChanged}) : super(key: key);

  @override
  dateTimeState createState() => dateTimeState();
}

class dateTimeState extends State<dateTime> {
  DateTime dateT;

  InputType inputType = InputType.both;

  final formats = {
    InputType.both: DateFormat("EEEE, MMMM d, yyyy 'at' h:mma"),
    InputType.date: DateFormat('yyyy-MM-dd'),
    InputType.time: DateFormat("HH:mm"),
  };

  Widget build(BuildContext context) => Container(
        child: DateTimePickerFormField(
          inputType: InputType.both,
          editable: true,
          format: formats[inputType],
          decoration: InputDecoration(
              labelText: 'Date/Time', hasFloatingPlaceholder: false),
          onChanged: (dt) {
            widget.onDateTimeChanged(dt);
          },
        ),
      );
}

(顺便说一句，您的 dateAndTimeWidget 是一种方法，不是小部件.因此，如果将其分配给Column的子级(列表)，Flutter框架将无法理解.)

(Btw your dateAndTimeWidget is a method, is not a Widget. So if you assign it to Column`s children(List), Flutter framework cannot understand.)

这篇关于从Flutter中的有状态小部件返回数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！