1

我正在编写一个应用程序，它通过 http 请求获取房地产列表的日期。

我使用 future 和 package:http/http.dart 来获取一个 json 数组

Future<List<dynamic>> fetchJson() async {
  final response = await http.get('https://brettransley.com/single.json'); 
  return parseHomes(response.body);
}

List<Properties> parseHomes(String responseBody) {
  final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();
  return parsed.map<Properties>((json) => Properties.fromJson(json)).toList();
}

我可以成功提取数据并通过属性类对其进行映射。Future List 可用于使用 FutureBuilder 输出小部件。

final allhomes = fetchJson();
FutureBuilder<List>(
  future: allhomes,
  builder: (BuildContext jsoncontext, AsyncSnapshot snapshot) {
    if (!snapshot.hasData) {
      return (Center(child: CircularProgressIndicator()));
    } else {
      return (Container(
        child: ListView.builder(
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          itemCount: snapshot.data.length,
          itemBuilder: (BuildContext homecontext, index) {
            final home = snapshot.data[index];
            return buildHome(context, home);
          },
        ),
      ));
    }
  },
),

我的问题是我想使用 FutureList 中的数据使用“ Google_Map_flutter ”插件输出地图标记

我的地图代码在这里：

GoogleMap(
  zoomGesturesEnabled: true,
  mapType: MapType.hybrid,
  onMapCreated: _onMapCreated,
  // markers:
  initialCameraPosition: CameraPosition(
    target: _center,
    zoom: 15.0,
  ),
  gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[
    new Factory<OneSequenceGestureRecognizer>(
      () => new EagerGestureRecognizer(),
    ),
  ].toSet(),
  markers: Set.from(getGeoCords()),
),

为了输出标记，我需要使用 getGeoCords() 函数来返回列表，但是我的数据在 FutureList 中，我可以按照此处的尝试运行并创建数组：

getGeoCords() {
  final List homemarkers = [];

  allhomes.then((value) {
    value.forEach((element) {
      print(element);
      homemarkers.add(
        Marker(
          markerId: MarkerId('myMarker'),
          draggable: false,
          onTap: () {
            print('Marker Tapped');
          },
          position:
              LatLng(double.parse(element.lat), double.parse(element.long)),
        ),
      );
    });
  });

  return homemarkers;
}

该函数成功创建了一个我可以使用的列表，但是因为我们使用的是 Future，所以该函数没有返回任何内容......直到谷歌地图加载之后。

任何人都可以帮助我将 FutureList 转换为能够与google_map_flutter插件一起使用的 List 的解决方案。

我对 Flutter 还很陌生，所以我对事情如何完全运作的理解可能存在差距。

4

2 回答 2

1

您可以将小部件包装GoogleMap在 a 中FutureBuilder，当未来解决时，您将拥有ListofMarker对象，snapshot.data就像您ListView.builder在代码的另一部分中所做的那样。

于 2020-07-22T05:19:14.137 回答
0

好的，所以我想通了，在 Future Builder 中构建它之后它似乎工作。

代码在这里：

FutureBuilder(
  future: allhomes,
  builder: (BuildContext jsoncontext, AsyncSnapshot snapshot) {
    if (!snapshot.hasData) {
      return (Center(child: CircularProgressIndicator()));
    } else {
      // List<dynamic> parsedJson = jsonDecode(snapshot.data);
      allMarkers = snapshot.data.map((element) {
        return Marker(
          markerId: MarkerId(element.address),
          draggable: false,
          onTap: () {
            print('Marker Tapped');
          },
          position: LatLng(double.parse(element.lat),
              double.parse(element.long)),
        );
      }).toList();

      return SizedBox(
        width: 200,
        height: 450,
        child: GoogleMap(
          zoomGesturesEnabled: true,
          mapType: MapType.hybrid,
          onMapCreated: _onMapCreated,
          // markers:
          initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 15.0,
          ),
          gestureRecognizers:
              <Factory<OneSequenceGestureRecognizer>>[
            new Factory<OneSequenceGestureRecognizer>(
              () => new EagerGestureRecognizer(),
            ),
          ].toSet(),
          markers: Set.from(allMarkers),
        ),
      );
    }
  },
),
于 2020-07-23T02:36:32.270 回答