Flutter - 为每个 Listview 项目运行异步函数答案

【问题标题】：Flutter - Run Async Function for Each Listview ItemFlutter - 为每个 Listview 项目运行异步函数
【发布时间】：2019-02-20 21:16:13
【问题描述】：

我有一个我在 Listview Builder 中检索和显示的位置列表。

每个位置都有一个纬度和经度值。

我现在尝试使用 GeoLocator 插件 (https://pub.dartlang.org/packages/geolocator) 将“距离”字段包含到列表视图中 - 通过使用“查找最近”按钮获取用户位置，然后使用用户的纬度/经度计算距离以及每个位置的纬度/经度。

由于“GeoLocator 计算距离方法”是异步的，我无法插入 Geolocator().distanceBetween(userLat, userLon, storeLat, storeLon) 直接进入小部件。

问题：那么我该如何做到这一点，当用户单击“查找最近”按钮时，每个 Listview 项目都通过 getDistance 方法传递并返回结果？

简化代码：

Future<List> getdata() async {
final response = await http.get(getStoreLocations);
return json.decode(response.body);
}


@override
Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(title: new Text("Location"),),
  body: new FutureBuilder<List>(
    future: getdata(),
    builder: (context, snapshot) {
      if (snapshot.hasError) print(snapshot.error);
      return snapshot.hasData
          ? new BrowseStoreLocation(
          list: snapshot.data,)
          : new Center(
        child: new CircularProgressIndicator(),
      );
    },
  ),
);
}
}

GeoLocator 获取用户位置方法：

getLocation () async {
Position position = await Geolocator().getCurrentPosition(LocationAccuracy.best);
userLat = position.latitude;
userLon = position.longitude;
setState(() {

});
}

GeoLocator 计算距离方法：

getDistance()async {
double distanceInMeters = await Geolocator().distanceBetween(userLat, 
userLon, storeLat, storeLon);
distance = distanceInMeters/1000;
}

我已经尝试通过设置变量进行实验。打印显示所有项目的 storeLat 和 storeLon 值，但仅计算并返回最后一个 listitem。

String storeLat = "";
String storeLon = "";
getDistance(storeLat,storeLon)async {
double distanceInMeters = await Geolocator().distanceBetween(userLat, userLon, double.parse(storeLat), double.parse(storeLon));
distance = distanceInMeters/1000;
setState(() {
});
}

new ListView.builder(
itemCount: widget.list == null ? 0 : widget.list.length,
itemBuilder: (context, i) {
storeLat = widget.list[i]['latitude'];
storeLon = widget.list[i]['longitude'];
print(storeLon+storeLat);
return Container(
child: Column(
children: <Widget>[
new Text(distance.toString())
],
),

【问题讨论】：

嗨，Damien，您找到解决方案了吗？几天后我遇到了同样的问题......不知道如何让 ListView 项目等待查询
对我来说，我只是让 Listview 构建器返回一个有状态的类，然后在这里有一个 Futurebuilder 来为每个 listview 项运行异步函数。
你能发布那个答案吗？我真的很感激
如果您找到了解决此问题的方法，请在此处发布。谢谢。
在这个链接的帮助下能够解决这个问题：stackoverflow.com/questions/60994455/…

标签： listview geolocation flutter

【解决方案1】：

为此，您必须在 ListView.builder 中为此目的使用 FutureBuilder，然后必须在其中调用您的方法 getDistance。

ListView.builder(
  itemCount: locationsList.length,
  itemBuilder: (context, position) {
    final current = locationsList[position];
    return FutureBuilder<String>(
      future: getDistance(current.latitude, current.longitude)
                   .then((location) => location.toString()),
      builder: (context, snapshot) {
        return Container(
          child: Column(
            children: <Widget>[new Text(snapshot.data)],
          ),
        );
     });
});

【讨论】：