如何在FutureBuilder中调用2个返回Future值的Future函数？

Question

我正在开发一个复杂的 Web 应用程序，其中我有时需要从后端 API 获取数据。有时，我需要在 Future Builder 中调用 2 个 future 函数来使用它们的值。然而，它使代码变得混乱，因为对于每个 FutureBuilder，我需要检查它是否有数据并返回小部件。看起来像这样。

return FutureBuilder<object>(
   future: func1(),
   builder:(context, AsyncSnapshot<object> snapshot1){
      if(snapshot1.hasData){
        return FutureBuilder<object>(
        future: func2(),
        builder:(context, AsyncSnapshot<object> snapshot2){
           if(snapshot2.hasData){
              return widget;
           }else{
        return CircularProgressIndicator();
        }
      }
      ),
      }else{
         return CircularProgressIndicator();
      }
    }
);

还有其他更简单的方法吗？我只能使用一个 FutureBuilder，这样我就不必每次都返回小部件，即（CircularProgressIndicator）。谢谢。

Answer 1

首先创建结果模型类，如下所示：

class ResultModel{
  final object1 result1;
  final object2 result2;
  ResultModel({required this.result1, required this.result2});
}

future然后你可以像这样创建新的：

Future<ResultModel> _newFuture() async {
  final results = await Future.wait([func1(), func2()]);
  return ResultModel(result1: results[0], result2: results[1]);
}

然后将其传递给 single FutureBuilder：

FutureBuilder<ResultModel>(
   future: _newFuture(),
   builder:(context, AsyncSnapshot<ResultModel> snapshot1){
      if(snapshot1.hasData){
        return return widget;
      }else{
         return CircularProgressIndicator();
      }
    }
)