如何在 Form 中间使用 Flutter CircularProgressIndicator()?

Posted

技术标签:

【中文标题】如何在 Form 中间使用 Flutter CircularProgressIndicator()?【英文标题】:How to use Flutter CircularProgressIndicator() middle of the Form? 【发布时间】:2019-05-23 12:52:04 【问题描述】:

我有一个表格; - 3个文本表单域 - 1 个下拉菜单。 - 1 个普通文本 ************** - 2个文本表单域

并基于下拉(是/否)示例;如果该部分为 Yes,则从 Internet 获取值并分配给普通文本并继续显示最后 2 个文本表单字段。

我的问题是当我从表单的互联网中间获取数据时如何使用 CircularProgressIndicator()。我知道如何使用 CircularProgressIndicator() 和显示小部件,但我可以让它在表单中间做同样的事情。如何使用表单中间的 CircularProgressIndicator() 并继续...

【问题讨论】:

【参考方案1】:

我不完全理解您是否希望用户能够在检索数据时触摸表单。如果没有,那么我建议使用modal progress hud package。您将实现与尼克相同的目标,但花费更少的精力。

【讨论】:

感谢 Amit,我会在下一个项目中使用它【参考方案2】:

完整代码在这里。为了清楚起见,我使用 Future.delayed 来演示我是如何做到的。我们可以使用 Future ....() async 从互联网获取数据,因此很容易将 void _showPrint() 替换为 Future _getDataFromInternet() async ....... _load = false; _buildRest = true;

class _MyHomePageState extends State<MyHomePage> 
  bool _load = false;
  bool _buildRest = false;

  void _showPrint() 
    print("loading is true");
    Future.delayed(const Duration(seconds: 6), () 
      setState(() 
        _load = false;
        _buildRest = true;
      );
    );
  

  //TODO: MAIN BUILD WIDGET *****************************
  @override
  Widget build(BuildContext context) 
    Widget loadingIndicator = _load
        ? new Container(
            color: Colors.green.withOpacity(0.3),
            width: MediaQuery.of(context).size.width,//70.0,
            height: MediaQuery.of(context).size.height, //70.0,
            child: new Padding(
                padding: const EdgeInsets.all(5.0),
                child: new Center(child: new CircularProgressIndicator())),
          )
        : new Container();
    return new Scaffold(
        backgroundColor: Colors.white,
        body: new Stack(
          children: <Widget>[
            new Padding(
              padding:
                  const EdgeInsets.symmetric(vertical: 50.0, horizontal: 20.0),
              child: new ListView(
                children: <Widget>[
                  new Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      new TextField(),
                      new TextField(),
                      new TextField(),
                      new TextField(),
                      new Padding(
                          padding: EdgeInsets.only(top:20.0),
                        child: new FlatButton(
                            color: Colors.green[400],
                            child: new Text('Get Data From Internet'),
                            onPressed: () 
                              setState(() 
                                _load = true;
                              );
                              _showPrint();
                            ),
                      ),
                      _buildRest == true
                        ? _buildRestoftheForm()
                        : new Container()
                    ],),],),
            ),
            new Align(
              child: loadingIndicator,
              alignment: FractionalOffset.center,
            ),
          ],
        ));
  

  Widget _buildRestoftheForm()
    return new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        new TextField(),
        new TextField(),
        new TextField(),
      ],
    );
  

【讨论】:

以上是关于如何在 Form 中间使用 Flutter CircularProgressIndicator()?的主要内容,如果未能解决你的问题,请参考以下文章

使用 Flutter Form Builder 如何通过添加 FormBuilderFieldOption 的值来更改 FormBuilderDateTimePicker 的日期值

为啥 Flutter 文档在创建 Form 时要求使用 GlobalKey 而不是其他类型的键?

如何将“material_tag_editor”中用户提交的标签数据添加到“Flutter Form Builder”表单中?

为啥 Flutter 中的 Form 需要 GlobalKey?

Flutter中如何检测ListView的滚动位置

flutter 表单Form使用示例