• Flutter异步加载组件FutureBuilder的用法
  • 发布于 2个月前
  • 309 热度
    0 评论
  • 双人剧
  • 0 粉丝 30 篇博客
  •   
FutureBuilder
在实际开发中,进入一个页面后执行网络请求加载数据并显示是非常普遍的,这时候我们一般会显示loading直到加载完成显示正常页面。在flutter中我们可以在initState中发起异步请求,然后将请求结果赋值给data,并setState刷新页面,在build中可以这样实现
if(data == null){
    return _LoadingWidget()
}
else{
    return ...
}
实际上flutter提供了一个FutureBuilder专门来处理需要异步的组件,下面是一个简单的示例:
var _future = Future.delayed(Duration(seconds: 3), () {
   // 堆代码 duidaima.com
    return '服务器返回的数据';
  });
 
FutureBuilder(
      future: _future,
      builder: (context, snapshot) {
        var widget;
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError) {
            widget = Text("出错了");
          } else {
            widget = Text(snapshot.data);
          }
        } else {
          widget = Padding(
            padding: EdgeInsets.all(20),
            child: CircularProgressIndicator(),
          );
        }
 
        return Center(
          child: widget,
        );
      },
    );
可以看到FutureBuilder有两个主要属性:
future:异步处理的任务。比如请求数据,读取文件等等
builder:创建widget。其中它的snapshot是该组件当前的状态,我们通过它来实现组件的切换。

snapshot的connectionState表示异步任务的状态,如果是ConnectionState.done表示任务完成,这时候通过snapshot.hasError来区分是出错(显示错误)还是正常完成(显示数据);否则就表示任务在执行中(显示laoding)。我们通过这些状态来返回不同的组件来实现异步加载的过程。

当任务正常完成(ConnectionState.done且snapshot.hasError为false)时,我们可以通过snapshot.data来获取异步返回的数据,再渲染页面即可。

防止FutureBuilder重绘
FutureBuilder是一个StatefulWidget控件,如果父节点重绘rebuild那么FutureBuilder也会重绘,但是这时候可能我们根本不是要请求数据,可能仅仅是更新页面上的一个文案,这样就会造成不必要的浪费和消耗,我们要尽量避免,所以就需要防止FutureBuilder重绘。

FutureBuilder重绘源码如下:
@override
  void didUpdateWidget(FutureBuilder<T> oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.future != widget.future) {
      if (_activeCallbackIdentity != null) {
        _unsubscribe();
        _snapshot = _snapshot.inState(ConnectionState.none);
      }
      _subscribe();
    }
  }
可以看到它是判断futrue是否是同一个对象来执行重绘的,所以我们只要提前将异步任务的函数赋值给一个变量,然后在FutureBuilder中使用这个变量即可,如下:
var _mFuture;
 
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _mFuture = _future();
  }
 
 _future() async{
    ...
  }
 
FutureBuilder(
    future: _mFuture,
    ...
)

这样重绘的时候因为是同一个对象,所以FutureBuilder不会重绘,减少了不必要的资源损耗。
用户评论