Flutter Widget之FutureBuilder使用示例详解
作者:程序员界的小学生
这篇文章主要为大家介绍了Flutter Widget之FutureBuilder使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
正文
本质上Flutter和Dart是异步的,Dart是Futures使你能够管理IO而不用担心线程或死锁。
例如,从应用程序外部加载数据需要时间,而Futures允许Dart先处理其他任务直到请求的数据可用。
涉及Future时 如何构建Flutter小部件
输入FutureBuilder
输入FutureBuilder,这是处理Futures的构造器
FutureBuilder( future: _data, builder: _myBuilderFunction, )
FutureBuilder让你轻松确定Future的当前状态并选择在数据加载时和数据可用时显示的内容。
首先给FutureBuilder一个Future,但是等一下,你不想在FutureBuilder里创建Future。
正如这段代码所代表
每次重建FutureBuilder的parent时都会重新开始获取数据。
相反,早些获得Future,就像在小部件生命周期方法一样
initState didUpdateWidget didChangeDependencies
因此,创建新的状态变量并将此数据获取请求,从FutureBuilder移到initState,在那里我们会给它一个builder,但要确保使用connectionState检查Future的状态,并在Future忙碌时显示适当的小部件
Future<MyData> _data; initState() { _data = http.get('http://awessome.data'), } FutureBuilder( future: _data, builder: (context, snapshot) { if (snapshot.connectionState == done) { return AwesomeData(snapshot.data); } else { return CircularProgressIndicator(); } } )
最后,在Future进行解析时最好检查有没有发生错误
if (snapshot.connectionState == done) { if (snapshot.hasError) { return SomethingWenWrong(); } }
其他connectionStates
你也可以使用其他connectionStates
- ConnectionState.active
- ConnectionState.done
- ConnectionState.waiting
- ConnectionState.none
如果想了解有关FutureBuilder的内容,或者关于Flutter的其他功能,请访问flutter.dev
以上就是Flutter Widget之FutureBuilder使用示例详解的详细内容,更多关于Flutter Widget FutureBuilder的资料请关注脚本之家其它相关文章!