Flutter：调试小部件重建的正确方法

Question

我如何查看是什么导致我的小部件继续传播小部件树？我正在使用Provider程序包，并且遇到小部件不断堆积的问题-例如，如果我向首页添加了一条打印语句：

@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

试试 https://pub.dev/packages/debug_tools 中的 BuildTracker

它允许跟踪导致小部件被标记为脏并因此导致重建的堆栈跟踪。

示例运行：

构建的小部件

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

被标记为脏的小部件（构建根）

ValueListenableBuilder ← [root]:

  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
...

Answer 3

"Flutter Performance" tool在调试模式下与应用交互时实时显示小部件重建。

---

从其documentation（与上面相同的URL）中：

  

此帧重建的确切计数显示在第二个中   右边的列。对于大量的重建，黄色   旋转圈显示。最右边的列显示了多少   自进入当前屏幕以来，重新构建窗口小部件的时间。对于   未重建的小部件，将显示一个纯灰色圆圈。除此以外，   显示一个灰色的旋转圆圈。

链接的页面包含其他配置提示，尤其是：

  

请注意，大量重建并不一定表示有问题。通常，只有在已经以配置文件模式运行应用程序并验证性能不是您想要的功能时，才应该担心过度重建。

---

从个人角度和更高的教育水平来看，与UI交互时实时观察重建行为，帮助我掌握了特定的Flutter小部件和机制。

截止到2019年12月，此工具仅在Android Studio和IntelliJ的Flutter插件上可用。