如何在FutureBuilder中调用返回List<Marker>的方法并将结果存入markerList

1 先修正原getMarkers函数的错误 #

原代码存在两个会导致运行异常的问题，需要先修复：

• FireStoreUtils.getFriendsList是异步方法，漏加了await关键字
• 变量名大小写错误，MarkerTemp和定义的markerTemp不一致

修正后的代码：

Future<List<Marker>> getMarkers() async {
  List<Marker> markerTemp = [];
  List<String> friendsList = [];
  QuerySnapshot snapshot = await FireStoreUtils.getFriendsList(current.userID);
  for (var doc in snapshot.docs) {
    friendsList.add(doc.reference.id);
  }
  for (var friend in friendsList) {
    DocumentSnapshot document = await locationRef.doc(friend).get();
    markerTemp.add(Marker(...));
  }
  return markerTemp;
}

2 配合FutureBuilder实现数据获取与存储 #

我们用StatefulWidget实现，将返回的marker列表存储为State的成员变量，整个视图层都可以直接访问：

class MarkerMapPage extends StatefulWidget {
  const MarkerMapPage({super.key});

  @override
  State<MarkerMapPage> createState() => _MarkerMapPageState();
}

class _MarkerMapPageState extends State<MarkerMapPage> {
  // 视图层可全局访问的marker列表变量
  List<Marker> markerList = [];
  // 缓存Future实例，避免每次build重复触发接口请求
  late Future<List<Marker>> _markersFuture;

  @override
  void initState() {
    super.initState();
    // 页面初始化时仅触发一次数据请求
    _markersFuture = getMarkers();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Marker>>(
      future: _markersFuture,
      builder: (context, snapshot) {
        // 加载中状态
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        // 错误状态处理
        if (snapshot.hasError) {
          return Center(child: Text('加载失败：${snapshot.error}'));
        }
        // 数据加载成功
        if (snapshot.hasData) {
          // 将返回结果赋值给全局可用的markerList
          markerList = snapshot.data!;
          // 此处返回你的业务视图，比如地图组件可直接使用markerList
          return GoogleMap(
            markers: Set.from(markerList),
            // 其他地图配置参数
          );
        }
        // 空数据状态
        return const Center(child: Text('暂无好友位置数据'));
      },
    );
  }
}

注意事项 #

• 不要直接将getMarkers()写在FutureBuilder的future参数中，否则每次widget重建都会重复请求数据，缓存到成员变量可以避免这个问题
• 所有边界状态（加载中、错误、空数据）都要做对应处理，避免页面白屏或崩溃

内容的提问来源于stack exchange，提问作者Lorenzo Cutrupi