Dart/flutter : how to build a form with multiple user input fields easily

Question

我想构建一个表单，其中有多个 TextField 小部件，并希望有一个按钮，该按钮在按下时通过传递从这些字段收集的数据来撰写和发送电子邮件。

为此，我开始构建一个 InheritedWidget 以包含 TextField-s，并基于构造函数中传递的操作 - 以下代码中尚未包含的功能 -它会通过 toString 方法覆盖返回不同的文本。

据我所知，只要 InheritedWidget 是当前 Widget 树的一部分，它就会保持它的值(因此，例如，如果我从表单导航，它就会被销毁并且值丢失).

下面是我如何使用 InheritedWidget 构建我的 TextForm:

class TextInheritedWidget extends InheritedWidget {
  const TextInheritedWidget({
    Key key,
    this.text,
    Widget child}) : super(key: key, child: child);

  final String text;

  @override
  bool updateShouldNotify(TextInheritedWidget old) {
    return text != old.text;
  }

  static TextInheritedWidget of(BuildContext context) {
    return context.inheritFromWidgetOfExactType(TextInheritedWidget);
  }

}

class TextInputWidget extends StatefulWidget {
  @override
  createState() => new TextInputWidgetState();
}

class TextInputWidgetState extends State<TextInputWidget> {
  String text;
  TextEditingController textInputController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return new TextInheritedWidget(
      text: text,
      child: new TextField(
        controller: textInputController,
        decoration: new InputDecoration(
          hintText: adoptionHintText
        ),
        onChanged: (text) {
          setState(() {
            this.text = textInputController.text;
          });
        },
      ),
    );
  }

  @override
  String toString({DiagnosticLevel minLevel: DiagnosticLevel.debug}) {
    // TODO: implement toString
    return 'Név: ' + text;
  }
}

这是启动电子邮件发送的按钮:

TextInputWidget nameInputWidget = new TextInputWidget();
  TextInheritedWidget inherited = new TextInheritedWidget();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Örökbefogadás'),
      ),
      body: new Container(
        padding: const EdgeInsets.all(5.0),
        child: new ListView(
          children: <Widget>[
            new Text('Név:', style: infoText16BlackBold,),
            nameInputWidget,
            new FlatButton(onPressed: () {
              launchAdoptionEmail(nameInputWidget.toString(), 'kutya');
            },
                child: new Text('Jelentkezem'))

          ],
        ),
      ),

    );
  }

我的问题是 nameInputWidget.toString() 只是返回 TextInputWidget(类名)，我似乎找不到访问 TextInputWidgetState.toString() 方法。

我知道 TextInheritedWidget 正确保存了 text 值，但我不确定如何通过我的 nameInputWidget 对象访问它。

TextInputWidget 是否应该能够通过 InheritedWidget 用来确定更新和存储哪个 Widget 的上下文来访问数据值？

Answer 1

这是不可能的。 只有 InheritedWidget 的子级才能访问它的属性

解决方案是将 InheritedWidget 放在 Button 的某个位置。但这意味着您必须重构才能考虑到这一点。