如何防止 FutureBuilder 重建，即使它的數據沒有改變？

Question

我目前正在開發一個 Flutter 應用程序，它使用大量 REST API 與服務器端通信。 我面臨一些與 FutureBuilder 小部件相關的性能問題，實現如下：

RefreshIndicator(
  displacement: 100.0,
  onRefresh: _refreshLastEntries,
  child: FutureBuilder<List<Entry>> (
    future: lastEntriesList,
    builder: (context, snapshot) {
      if(snapshot.hasError) print(snapshot.error);
      if(snapshot.data == null) return Container();
      else return ListView.builder(
        controller: _controller,
        itemCount: snapshot.data.length,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(10.0),
            child: EntryCard(entry: snapshot.data[index])
          );
        },
      );
    },
  ),
),

順便說一句，在同一個頁面構建中還有 2 個帶有 RefreshIndicator 的 FutureBuilder 實現，它們用 PageView 包裝。 Android Studio 中的 Flutter 性能選項卡顯示平均值。 調試模式下 30 幀/秒（有時 < 30）的 fps。 在發布模式下效果更好，但仍低於 60 fps，我可以注意到 animation 滯后。

好吧，我知道問題（雖然不確定）是 FutureBuilder 試圖重建，只要AsyncSnapshot有數據。 但我想不出更好的實現方式。 刷新 function _refreshLastEntries()實現為：

Future<Null> _refreshLastEntries() async {
  setState(() {
     lastEntriesList = fetchLastEntries(2);
  });
  return Future.delayed(Duration(milliseconds: 600));
}

fetchLastEntries(int)僅用於獲取數據並將 map 放入某個 EntryModel class 中。 成功獲取數據后，我嘗試設置一個全局值，然后將其用於構建 ListView，但它不起作用。

如果這很重要，我正在使用帶有 Snapdragon 835 和 Adreno 540 的小米 MI6 測試這個應用程序。

我不會附加任何其他代碼作為整個 PageView 構建代碼，因為很難重現相同的構建，謝謝！

Answer 1

如果未來狀態沒有改變， FutureBuilder小部件不應該重建。 在你的情況下可能發生的是

setState(() {
   lastEntriesList = fetchLastEntries(2);
});

在_refreshLastEntries()內部導致未完成的未來重建，完成后，通過 FutureBuilder 導致另一個重建。

由於您使用的是 RefreshIndicator，我認為您不需要 FutureBuilder。 在_refreshLastEntries()中執行異步工作，完成后更新 ListView.builder 小部件。 為了更清楚：

//Declare lastEntriesList as a list
List<Entry> lastEntriesList;

Future<void> _refreshLastEntries() async {
  return fetchLastEntries(2).then((lastEntries) {
    setState(() {
      lastEntriesList = lastEntries;
    });
  });
}

並按如下方式修改您的子樹：

RefreshIndicator(
  displacement: 100.0,
  onRefresh: _refreshLastEntries,
  child: ListView.builder(
    controller: _controller,
    itemCount: lastEntriesList.length,
    itemBuilder: (context, index) {
      return Padding(
        padding: const EdgeInsets.all(10.0),
        child: EntryCard(entry: lastEntrieslist[index])
      );
    },
  );,
)