首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在表单中间使用Flutter CircularProgressIndicator()?

如何在表单中间使用Flutter CircularProgressIndicator()?
EN

Stack Overflow用户
提问于 2018-12-24 18:17:36
回答 2查看 3.2K关注 0票数 0

我有一个表格;-3\f25 text form field -3\f6下拉列表。普通文本*-2\f25 text form -2\f6字段

根据下拉列表( Yes /No)示例;如果部分为Yes,则从internet获取值并分配给普通文本,然后继续显示最后两个文本表单字段。

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

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-12-25 15:06:42

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

代码语言:javascript
运行
复制
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(),
      ],
    );
  }
}
票数 1
EN

Stack Overflow用户

发布于 2018-12-27 01:10:43

我没有完全理解您是否希望用户在检索数据时能够触摸表单。如果没有,那么我建议使用modal progress hud package。你将会实现和Nick提供的一样的东西,但是更少的努力。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53912062

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档