如何从另一个屏幕在Flutter中重置表单?

拉贾特

如何在Flutter应用中重置(清除)表单字段?一旦数据提交到服务器?

在我的应用中,我有2页。

第一页输入表格详细信息,例如姓名,地址等

第二页是上传图像。

第一页将数据推送到第二页。(这里我没有进行推送替换,这意味着第二页位于第一页的顶部)

第二页是选择图像,并将表单数据和图像上载到服务器。

我的问题是

上传完成后,如何重设全部2个页面?

我正在使用Firebase服务器上传我的数据!

提前致谢

米格尔·瑞沃(Miguel Ruivo)

例

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

  1. 将第二个屏幕的构造函数传递给第一个表单字段键,并同时重置两者(当您完成对服务器的数据处理后)

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(),
              )
            ],
          ),
        ),
      ),
    );
  }
}
  1. 或者,当第二个屏幕从堆栈中弹出时,您可以重置第一个屏幕窗体,这应该是IMO,因为我相信您不是在处理后从第二个屏幕访问第一个屏幕窗体数据,因此,目的,返回时重置就足够了。在这种情况下,您将获得以下结果

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在另一个组件中重置表单构建器?

如何将List <Map>的信息获取到Flutter中的另一个屏幕?

在 Flutter 中,如何在主屏幕中接收图像,然后将其重定向到另一个屏幕?

如何在Flutter中从一个屏幕导航到另一个屏幕(开始活动)并关闭当前屏幕(完成)

使用redux-form,如何从另一个组件重置表单值?

如何检测表单何时从一个屏幕更改为另一个屏幕

Flutter:从另一个回来时更新屏幕

如何隐藏表单提交中的一个div并显示另一个div?

Flutter:如何将图像文件传递到另一个屏幕

如何告诉另一个表单关闭的表单

从Flutter中的另一个屏幕调用Future函数

如何在SwiftUI Apple Watch App中从一个屏幕导航到另一个屏幕

我如何使用道具在本机反应中从一个屏幕导航到另一个屏幕?

从一个屏幕转到另一个屏幕时,如何不丢失列表中的数据?

如何从另一个表单中取消嵌入子表单?

如何将表单中的列表发送到另一个表单

如何从父表单中的另一个datagridview更新子表单的datagridview

在VB中打开另一个表单时如何禁用主表单

如何根据反应中的另一个输入表单自动更新一个输入表单?

如何从C#.Net中的另一个窗口表单继承一个窗口表单

如何将一个表单标签的元素带入javascript中的另一个表单标签

如何从一个 html 表单中获取数据并将其显示在另一个表单上?

如何在JGit中从一个git分支硬重置为另一个?

如何从另一个终端远程分离屏幕

如何导航到另一个屏幕

获取在另一个屏幕中声明的变量

如何使用动画从一个屏幕过渡到另一个屏幕

如何从Xamarin跨平台的一个屏幕转到另一个屏幕?

如何从一个屏幕移动到另一个屏幕 ionic 2