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

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

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

第二页是上传图像。

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

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

我的问题是

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

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

提前致谢

最佳答案

forms - 如何从另一个屏幕重置Flutter中的表单?-LMLPHP

例如,使用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,因为我相信您不是在处理后从第二个屏幕访问第一个屏幕表单数据,因此,出于演示目的,返回时重置就足够了。在这种情况下,您将以以下
  • 结尾

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

    10-07 19:21
    查看更多