开发者

Flutter Widget之FutureBuilder使用示例详解

开发者 https://www.devze.com 2022-12-01 10:24 出处:网络 作者: 程序员界的小学生
目录正文正文本质上Flutter和Dart是异步的,Dart是Futures使你能够管理IO而不用担心线程或死锁。例如,从应用程序外部加载数据需要时间,而Futures允许Dart先处理其他任务直到请...
目录
  • 正文

正文

本质上Flutter和Dart是异步的,Dart是Futures使你能够管理IO而不用担心线程或死锁。

Flutter Widget之FutureBuilder使用示例详解

例如,从应用程序外部加载数据需要时间,而Futures允许Dart先处理其他任务直到请求的数据可用。

Flutter Widget之FutureBuilder使用示例详解

但是涉及phpFuture时,你如何构建Flutter小部件呢?

输入FutureBuilder,这是处理Futures的构造器

FutureBuilder(
    future: _data,
    builder: _myBuilderFunction,
)

FutureBuilder让你轻松确定Future的当前状态并选择在编程客栈数据加载时和数据可用时显示的内容。

Flutter Widget之FutureBuilder使用示例详解

首先给FutureBuilder一个Future,但是等一下,你不想在FutureBuilder里创建Future。

正如这段代码所代表

Flutter Widget之FutureBuilder使用示例详解

每次重建FutureBuilder的parent时都会重新开始获取数据。

Flutter Widget之FutureBuilder使用示例详解

相反,早些获得Future,就像在小部件生命周期方法一样

initState
didUpdateWidget
didChangeDependencies

因此,创建新的状态变量并将此数据获取请求,从FutureBuilder移到initState,在那里我们会给它一个builder,但要确保使用connectionState检查Fu开发者_Python开发ture的状态,并在Future忙碌时显示适当的小部件

Future<MyData> _data;
initState() {
    _data = http.get('http://awessome.data'),
}
FutureBuilder(python
    future: _data,
 php   builder: (context, snapshot) {
        if (snapshot.connectionState == done) {
            return AwesomeData(snapshot.data);
        } else {
            return CircularProgressIndicator();
        }
    }
)

Flutter Widget之FutureBuilder使用示例详解

最后,在Future进行解析时最好检查有没有发生错误

if (snapshot.connectionState == done) {
    if (snapshot.hasError) {
        return SomethingWenWrong();
    }
}

Flutter Widget之FutureBuilder使用示例详解

你也可编程以使用其他connectionStates

  • ConnectionState.active
  • ConnectionState.done
  • ConnectionState.waiting
  • ConnectionState.none

如果想了解有关FutureBuilder的内容,或者关于Flutter的其他功能,请访问flutter.dev

以上就是Flutter Widget之FutureBuilder使用示例详解的详细内容,更多关于Flutter Widget FutureBuilder的资料请关注我们其它相关文章!

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号