如何从另一个屏幕重置 Flutter 中的表单？

Question

如何重置（清空）flutter app中的表单字段？一旦数据提交到服务器？

在我的应用程序中，我有 2 个页面。

第 1 页输入表单详细信息，如姓名、地址等

第二页是上传图片

第一页将数据推送到第二页。（这里我没有进行推送替换，意味着第二页位于第一页之上）

第二页是select图片，将表单数据和图片上传到服务器。

我的问题是

上传完成后，如何重置所有 2 个页面？

我正在使用 firebase 服务器上传我的数据！

提前致谢

Answer 1

例如，使用 GlobalKey<FormState> 访问表单状态和 reset() 字段。考虑到这一点，您可以：

将第一个表单字段传入第二个屏幕的构造函数密钥并同时重置（当您的数据完成时处理到服务器左右）

class Screen1 extends StatefulWidget {
  _Screen1State createState() => _Screen1State();
}

class _Screen1State extends State<Screen1> {
  final _formKeyScreen1 = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First screen'),
      ),
      body: Center(
        child: Form(
          key: _formKeyScreen1,
          child: Column(
            children: <Widget>[
              TextFormField(),
              TextFormField(),
              TextFormField(),
              RaisedButton(
                child: Text('Navigate to second screen...'),
                onPressed: () => Navigator.of(context).push(MaterialPageRoute(
                      builder: (BuildContext context) => Screen2(_formKeyScreen1),
                    )),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class Screen2 extends StatefulWidget {
  final GlobalKey<FormState> firstScreenFormKey;
  Screen2(this.firstScreenFormKey);
  _Screen2State createState() => _Screen2State();
}

class _Screen2State extends State<Screen2> {
  final _formKeyScreen2 = GlobalKey<FormState>();

  void _processData() {
    // Process your data and upload to server
    _formKeyScreen2.currentState?.reset();
    widget.firstScreenFormKey?.currentState?.reset();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second screen'),
      ),
      body: Center(
        child: Form(
          key: _formKeyScreen2,
          child: Column(
            children: <Widget>[
              TextFormField(),
              TextFormField(),
              TextFormField(),
              RaisedButton(
                child: Text('Submit data'),
                onPressed: () => _processData(),
              )
            ],
          ),
        ),
      ),
    );
  }
}

或者，当第二个屏幕从堆栈中弹出时，您可以重置第一个屏幕表单，IMO，这应该足够了，因为我相信您在处理后不会从第二个屏幕访问第一个屏幕表单数据，因此，如果只是为了演示目的，在 return 上重置应该就足够了。在这种情况下，您将以以下内容结束

class Screen1 extends StatefulWidget {
  _Screen1State createState() => _Screen1State();
}

class _Screen1State extends State<Screen1> {
  final _formKeyScreen1 = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First screen'),
      ),
      body: Center(
        child: Form(
          key: _formKeyScreen1,
          child: Column(
            children: <Widget>[
              TextFormField(),
              TextFormField(),
              TextFormField(),
              RaisedButton(
                child: Text('Navigate to second screen...'),
                onPressed: () {
                  Navigator.of(context)
                      .push(MaterialPageRoute(
                        builder: (BuildContext context) => Screen2(),
                      ))
                      .then((_) => _formKeyScreen1.currentState.reset());
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

class Screen2 extends StatefulWidget {
  _Screen2State createState() => _Screen2State();
}

class _Screen2State extends State<Screen2> {
  final _formKeyScreen2 = GlobalKey<FormState>();

  void _processData() {
    // Process your data and upload to server
    _formKeyScreen2.currentState?.reset();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second screen'),
      ),
      body: Center(
        child: Form(
          key: _formKeyScreen2,
          child: Column(
            children: <Widget>[
              TextFormField(),
              TextFormField(),
              TextFormField(),
              RaisedButton(
                child: Text('Submit data'),
                onPressed: () => _processData(),
              )
            ],
          ),
        ),
      ),
    );
  }
}

如何从另一个屏幕重置 Flutter 中的表单？

How to reset a Form in Flutter from another screen?

forms

dart

flutter

flutter-layout