如何在 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”表单中?