FutureBuilder 显示加载指示器，尽管结果已缓存

Question

我在尝试将 FutureBuilder 与 Provider 和缓存一起使用时遇到了问题。 计算完成一次，然后将其缓存。代码如下所示：

FutureBuilder(
     future: model.calculateStats(chartType: getChartType()),
     builder: (context, snapshot) {
         if(snapshot.connectionState != ConnectionState.done) {
           return Center(
              child: CircularProgressIndicator()
           );
         }

      return buildChart(model);
   },
)

那段代码在一个带有 ViewModel 的 Consumer 内部，它的方法是 calculateStats，如下所示：

Future calculateStats({ChartType chartType = ChartType.Monthly}) async {
   return await MemoryCache.instance.getOrCreateAsync("stats:${chartType.index}", () async {
      var statsMaker = StatsMaker(chartType: chartType);
      
      this._currentStats = await statsMaker.generate(
        startDate: _getStartDateForChartType(chartType),
        endDate: DateTime.now()
      );
    }, allowNull: true);
  }

在这里您可以看到正在发生的事情的视频：https://i.imgur.com/SWQ7N7P.mp4

辅助类 MemoryCache 检查提供的键是否在映射中，如果是，则返回值而不进行任何计算，应立即返回，如果未找到，则等待未来并存储结果.但是在这里，虽然结果被缓存了，但 FutureBuilder 显示了加载指示器（在视频中是橙色的）。我做错了什么？

Answer 1

他们可能是FutureBuilder 继续加载的两个原因。一是因为calculateStats不断触发，导致snapshot的状态被反复刷新。其次是您的getOrCreateAsync 可能返回一个已经完成的Future，而FutureBuilder 无法同步确定一个Future 已经完成。

有一种更方便的方式来一次性缓存和加载 UI，即使用 StreamBuilder，因为您只需在 initState 或 didChangeDependencies 中调用一次 async 方法，因此 UI不需要一直重新加载。

您还应该使用snapshot.hasData 来检查Future 值是否已完成且不为空。 在用户界面中：

@override
initState() {
  super.initState();
  model.calculateStats(chartType: getChartType());
}

// ... other lines

return StreamBuilder(
     stream: model.statsStream,
     builder: (context, snapshot) {
         if(!snapshot.hasData) {
           return Center(
              child: CircularProgressIndicator()
           );
         }

      return buildChart(snapshot.data);
   },
)

在您的async 函数中：

StreamController _controller = StreamController();

Stream get statStream => _controller.stream;

Future calculateStats({ChartType chartType = ChartType.Monthly}) async {
   final stats = await MemoryCache.instance.getOrCreateAsync( ... );
   // add your stats to Stream here (stats is the value you want to send to UI)
   _controller.add(stats);

确保您的 getOrCreateAsync 返回一个非空值，以便正确更新 Stream。

Answer 2

model.calculateStats(chartType: getChartType()) 是创建一个未来，还是仅仅引用一个未来？如果它创建了一个未来，那么你的 FutureBuilder 将不会完成。您必须在 initState 中创建未来，并将其放入那里的变量中，然后在 future: 处引用该变量。

编辑：啊，现在看，它正在创造一个未来。因此，您需要在 initState 期间将其存储到您的状态中。

Answer 3

检查snapshot.hasData和snapshot.hasError怎么样？