在日常的开发中经常会遇到二次请求才能完成显示的情况
举一个比较典型的例子：listView中的数据是下方的格式
[{String imgId,String text},{String imgId,String text}...]
需要使用imgId获取具体的图片url，这里就会有同学举手了：为啥不直接给我一个url
因为这里不是单纯的获取一个url而已，一般是一个图片对象，然后客户端根据不同的情况使用不同的图片（类似的还有订单Id等）
在原生Android中这个问题根本就不是个问题，在Adapter中再次进行网络请求（一般不会直接在Adapter中做这种事情，这里只是举个例子）并对ImageView进行赋值即可，
但是基于状态的Flutter做不到这一点，Widget是不可变的，没法对其进行再次赋值，而且build()方法是不接受Future类型返回值的，不能异步返回
这个有几个办法用来解决这个问题：
-
在本地额外加一个参数用来保存返回后的数据，在返回后调用setState()进行数据的保存
这样也不是说不行，但是至少会存在问题：- 什么时候进行setState的调用，如果每张图片完成后都进行setState，那么setState次数过多消耗就会很大，如果加载完成后setState那么就需要用户等待所有图片都下载成功才能看到图片，而且还需要额外的操作判断所有请求都完成
2.如果数据类型很多的话需要添加的参数就太多了，数据结构过于冗余
2.仅使用FutureBuilder<T>
FutureBuilder是一个异步组件，顾名思义，可以通过一个feature来进行组件的创建
/// Creates a widget that builds itself based on the latest snapshot of
/// interaction with a [Future].
///
/// The [builder] must not be null.
const FutureBuilder({
Key key,
this.future,
this.initialData,//与创建时的泛型相同
@required this.builder,//AsyncWidgetBuilder<T> = Widget Function(BuildContext context, AsyncSnapshot<T> snapshot);
}) : assert(builder != null),
super(key: key);
initialData是在feature未完成时该组件的值，这里不是必要的，但默认值为null，需要注意处理
builder中的 snapshot参数为feture返回时的数据包装类，使用 snapshot.data 进行数据的获取，该类还具有withError等方法用来处理意外情况
由于项目中使用 MVP 进行开发，逻辑部分需要在Presenter层中进行处理，以一个图片例如：
//presenter
@override
Future<Widget> requestImageDetail(String imageId) async{
var image = await _imModel.getImageDetail(await PublicParams.getParams()..["image_id"] = imageId);
var url = image!=null?image[0].imageMiddle:"";
return Future.value(ImageUtil.network(url));
}
//view
FutureBuilder(initialData:Image.asset(Constant.IMAGE_ICON_LIFE),
future:requestImageDetail(imageId),
builder: (BuildContext context, AsyncSnapshot<Widget> snapshot){
return snapshot.data;
},)
代码很简单，这个方法的返回值直接用作FutureBuilder的future即可，这个Future会直接完成。
这段代码虽然可以完成需求，但是对于MVP产生了严重的破坏，
首先，P层的方法不应该有返回值，
其次，在本项目中model层应该返回的是 StreamSubscription，用来监听Stream返回并可以断开监听，而在这里返回Future的话导致这个方法跳出了“三界”而不受管控
所以比较好的办法是使用Completer与FutureBuilder进行配合
-
使用Completer<T>与FutureBuilder进行配合
Completer<T>是与Future相关的一个类，调用Completer.complete(T)进行手动进行Future的返回
需要对上面的代码进行一些修改
//view
Completer<Image> _image = Completer();
mPresenter.requestImageDetail(_image, imageId);
FutureBuilder(initialData:Image.asset(Constant.IMAGE_ICON_LIFE),
future:_image.future,
builder: (BuildContext context, AsyncSnapshot<Widget> snapshot){
return snapshot.data;
},)
//presenter
requestImageDetail(Completer completer, String imageId) async{
makeRequest(_imModel.getImageDetail(await PublicParams.getParams()..["image_id"] = imageId,ICallBack<List<ImageInfoEntity>>(
(image){
var url = image!=null?image[0].imageMiddle:"";
completer.complete(ImageUtil.network(url));
}
)));
}
以上
