Flutter中Future.wait未按预期工作，如何正确等待多Future完成？

1. 先纠正一个关键误解：Future.wait 不会阻塞主线程 #

Future.wait是异步等待，它会把多个Future加入事件队列，等全部完成后触发回调，但不会卡住主线程——所以App其余部分能正常执行是完全正常的，这不是Bug。

2. 为什么then回调里的value是null两次？ #

这说明你传入Future.wait的两个Future（globals.checkExistingWochenplan()和globals.getWochenplan(kw:34)）本身没有返回有效数据，先检查这两个方法的实现：

常见错误点排查 #

• 确保方法内部的异步操作（比如Firebase的get()、快照解析）明确返回了结果，不要漏掉return语句。
• 反例（错误写法）：

  Future<bool> checkExistingWochenplan() async {
    // 没有return，导致Future返回null
    FirebaseFirestore.instance.collection('xxx').doc('yyy').get().then((snap) {
      return snap.exists;
    });
  }
  

• 正确写法（用await更易维护）：

  Future<bool> checkExistingWochenplan() async {
    final snap = await FirebaseFirestore.instance.collection('xxx').doc('yyy').get();
    return snap.exists; // 明确返回数据
  }
  
  Future<Wochenplan?> getWochenplan({required int kw}) async {
    final snap = await FirebaseFirestore.instance.collection('wochenplaene').doc('kw$kw').get();
    if (snap.exists) {
      return Wochenplan.fromJson(snap.data()!); // 返回解析后的模型
    }
    return null; // 无数据时主动返回null，这是合理的
  }
  

3. 正确使用Future.wait的姿势 #

不建议在setState里直接调用异步函数，更优雅的方式是用FutureBuilder管理依赖异步数据的Widget渲染，自动处理加载、错误、完成状态：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: Future.wait([
        globals.checkExistingWochenplan(),
        globals.getWochenplan(kw:34),
      ]),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          // 加载中显示loading组件
          return const CircularProgressIndicator();
        }
        if (snapshot.hasError) {
          // 出错时显示错误信息
          return Text('加载失败: ${snapshot.error}');
        }
        // 数据就绪，snapshot.data是对应两个Future返回值的List
        final bool exists = snapshot.data![0];
        final Wochenplan? wochenplan = snapshot.data![1];
        
        // 渲染依赖数据的Widget
        return YourDependentWidget(
          exists: exists,
          wochenplan: wochenplan,
        );
      },
    );
  }
}

如果一定要用setState手动管理，注意在initState里启动异步加载，做好错误捕获：

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool? _exists;
  Wochenplan? _wochenplan;
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _loadData(); // 在初始化阶段启动加载，不要在build里直接调用
  }

  Future<void> _loadData() async {
    try {
      final results = await Future.wait([
        globals.checkExistingWochenplan(),
        globals.getWochenplan(kw:34),
      ]);
      setState(() {
        _exists = results[0] as bool;
        _wochenplan = results[1] as Wochenplan?;
        _isLoading = false;
      });
    } catch (e) {
      setState(() {
        _isLoading = false;
        // 这里可以加错误提示，比如弹窗
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return const CircularProgressIndicator();
    }
    return YourDependentWidget(
      exists: _exists!,
      wochenplan: _wochenplan,
    );
  }
}

4. 排查步骤总结 #

1. 先检查两个Future方法的实现，确保每个方法都明确返回异步操作的结果，没有遗漏return。
2. 用await替代then处理Future，代码更易读且不易出错。
3. 优先用FutureBuilder管理异步数据的Widget渲染，减少手动setState的出错概率。
4. 给异步操作加错误捕获，避免未处理的异常导致崩溃。

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