Flutter：調試小部件重建的正確方法

Question

如何查看導致我的小部件不斷傳播小部件樹的原因？ 我正在使用 Provider package 並遇到小部件不斷堆積的問題 - 例如，如果我向主頁添加打印語句：

@override
  Widget build(BuildContext context) {
    print("Home");

然后在應用程序中導航一段時間后，如果我清除調試控制台並加載主頁或其下方的任何屏幕，我將獲得多個“主頁”打印輸出，即：

flutter: Home
flutter: Home
flutter: Home
flutter: Home
flutter: Home
flutter: Home

我瀏覽應用程序的次數越多，它們堆積的越多。 調試這個的正確方法是什么？

Answer 1

你可以使用 Flutter 的 devtools https://flutter.dev/docs/development/tools/devtools/overview

它擁有一些有用的屏幕，例如：

此屏幕包含在給定時間范圍內重建的小部件的詳細樹。

Answer 2

“Flutter Performance”工具在調試模式下與應用交互時實時顯示小部件重建。

---

從其文檔（與上述相同的 URL ）：

此框架的重建的確切計數顯示在右側的第二列中。 對於大量重建，會顯示一個黃色的旋轉圓圈。 最右邊的列顯示了自從進入當前屏幕以來，一個小部件被重建了多少次。 對於未重建的小部件，將顯示一個實心灰色圓圈。 否則，會顯示一個灰色的旋轉圓圈。

鏈接頁面包括進一步的分析提示，特別是：

請注意，多次重建並不一定表明存在問題。 通常，如果您已經在配置文件模式下運行應用程序並驗證性能不是您想要的，您應該只擔心過度重建。

---

就個人而言，在更具教育意義的層面上，在與 UI 交互的同時實時觀察重建行為有助於我掌握特定的 Flutter 小部件和機制。

截至 2019 年 12 月，此工具僅適用於 Android Studio 和 IntelliJ 的 Flutter 插件。

Answer 3

嘗試BuildTracker ://pub.dev/packages/debug_tools 的 BuildTracker

它允許跟蹤導致小部件被標記為臟並因此導致重建的堆棧跟蹤。

示例運行：

構建的小部件

• ValueListenableBuilder<String> ← [root]
• Directionality ← ValueListenableBuilder<String> ← [root]
• Text ← Directionality ← ValueListenableBuilder<String> ← [root]

被標記為臟的小部件（構建根）

ValueListenableBuilder ← [根]：

  State.setState                           package:flutter/src/widgets/framework.dart 1287:15
  _ValueListenableBuilderState._valueChanged package:flutter/src/widgets/value_listenable_builder.dart 182:5
  ChangeNotifier.notifyListeners           package:flutter/src/foundation/change_notifier.dart 243:25
  ValueNotifier.value=                     package:flutter/src/foundation/change_notifier.dart 309:5
* main.<fn>                                test/build_tracker_test.dart 25:10
...