使用旧版 Flutter 检查器

以下是检查器工具栏中可用功能的指南。当空间有限时，图标用作标签的视觉版本。

选择 widget 模式

启用此按钮以选择设备上的 widget 进行检查。要了解更多信息，请查看检查 widget。

刷新树

重新加载当前 widget 信息。

慢速动画

将动画运行速度减慢 5 倍以帮助微调它们。

显示辅助线

叠加辅助线以帮助解决布局问题。

显示基线

显示用于对齐文本的基线。可用于检查文本是否对齐。

高亮重绘

显示当元素重绘时颜色变化的边框。有助于发现不必要的重绘。

高亮过大图像

通过反转颜色和翻转图像来高亮显示内存占用过多的图像。

您可以浏览交互式 widget 树以查看附近的 widget 并查看它们的字段值。

要在 widget 树中定位单个 UI 元素，请单击工具栏中的 选择 Widget 模式 按钮。这将使设备上的应用程序进入“widget 选择”模式。单击应用程序 UI 中的任何 widget；这会在应用程序屏幕上选择该 widget，并将 widget 树滚动到相应的节点。再次切换 选择 Widget 模式 按钮以退出 widget 选择模式。

调试布局问题时，需要查看的关键字段是 size 和 constraints 字段。约束向下流动，而尺寸向上回流。有关其工作原理的更多信息，请参阅理解约束。

Flutter 布局浏览器帮助您更好地理解 Flutter 布局。

有关此工具功能的概述，请参阅 Flutter Explorer 视频

您可能还会发现以下分步文章很有用

• 如何使用 Flutter Inspector 调试布局问题

在 Flutter Inspector 中，选择一个 widget。布局浏览器支持弹性布局和固定大小布局，并为这两种布局提供特定工具。

当您选择一个弹性 widget（例如，Row、Column、Flex）或弹性 widget 的直接子项时，弹性布局工具将出现在布局浏览器中。

布局浏览器可视化了Flex widget 及其子项的布局方式。浏览器识别主轴和交叉轴，以及每个轴的当前对齐方式（例如，start、end 和 spaceBetween）。它还显示诸如弹性因子、弹性适应和布局约束等详细信息。

此外，浏览器还显示布局约束违规和渲染溢出错误。违规的布局约束显示为红色，溢出错误则以标准的“黄色胶带”模式呈现，就像您在运行设备上看到的那样。这些可视化旨在提高对溢出错误发生原因以及如何修复它们的理解。

在布局浏览器中单击一个 widget 会在设备上的检查器中镜像该选择。为此，需要启用选择 Widget 模式。要启用它，请单击检查器中的选择 Widget 模式按钮。

对于某些属性，例如弹性因子、弹性适应和对齐方式，您可以通过浏览器中的下拉列表修改其值。修改 widget 属性时，您不仅会在布局浏览器中看到新值，也会在运行 Flutter 应用程序的设备上看到新值。浏览器会在属性更改时进行动画处理，以便清楚地显示更改的效果。从布局浏览器进行的 widget 属性更改不会修改您的源代码，并在热重载时恢复。

布局浏览器支持修改mainAxisAlignment、crossAxisAlignment 和 FlexParentData.flex。将来，我们可能会添加对其他属性的支持，例如mainAxisSize、textDirection 和 FlexParentData.fit。

支持的值

• MainAxisAlignment.start
• MainAxisAlignment.end
• MainAxisAlignment.center
• MainAxisAlignment.spaceBetween
• MainAxisAlignment.spaceAround
• MainAxisAlignment.spaceEvenly

支持的值

• CrossAxisAlignment.start
• CrossAxisAlignment.center
• CrossAxisAlignment.end
• CrossAxisAlignment.stretch

布局浏览器在 UI 中支持 7 种弹性选项（null、0、1、2、3、4、5），但从技术上讲，弹性 widget 子项的弹性因子可以是任何整数。

布局浏览器支持两种不同类型的FlexFit：loose 和 tight。

当您选择一个不是弹性 widget 子项的固定大小 widget 时，布局浏览器中将显示固定大小布局信息。您可以查看所选 widget 及其最近上游 RenderObject 的大小、约束和填充信息。

Flutter 检查器提供多种选项来可视化调试您的应用程序。

启用此选项后，动画将以 5 倍的速度运行，以便于视觉检查。如果您想仔细观察和调整一个看起来不太对劲的动画，这会很有用。

这也可以在代码中设置

import 'package:flutter/scheduler.dart';

void setSlowAnimations() {
  timeDilation = 5.0;
}

这将使动画速度减慢 5 倍。

以下链接提供更多信息。

• Flutter 文档：timeDilation 属性

以下屏幕录像显示了动画减速前后的情况。

此功能在您的应用程序上绘制辅助线，显示渲染框、对齐方式、填充、滚动视图、裁剪和间隔。

此工具可用于更好地理解您的布局。例如，通过查找不需要的填充或理解 widget 对齐方式。

您也可以在代码中启用此功能

import 'package:flutter/rendering.dart';

void showLayoutGuidelines() {
  debugPaintSizeEnabled = true;
}

在屏幕上绘制的 widget 会创建一个渲染框，这是 Flutter 布局的构建块。它们显示为亮蓝色边框

对齐方式用黄色箭头表示。这些箭头显示 widget 相对于其父级的垂直和水平偏移。例如，此按钮的图标显示为由四个箭头居中

填充显示为半透明的蓝色背景

带有可滚动内容的 widget（例如列表视图）显示为绿色箭头

裁剪，例如在使用ClipRect widget时，显示为带有剪刀图标的粉色虚线

间隔器 widget 显示为灰色背景，例如此没有子项的SizedBox

此选项使所有基线可见。基线是用于定位文本的水平线。

这对于检查文本是否垂直精确对齐很有用。例如，以下屏幕截图中的文本基线略微不对齐

Baseline widget 可用于调整基线。

在任何设置了基线的渲染框上都会绘制一条线；字母基线显示为绿色，象形基线显示为黄色。

您也可以在代码中启用此功能

import 'package:flutter/rendering.dart';

void showBaselines() {
  debugPaintBaselinesEnabled = true;
}

此选项会在所有渲染框周围绘制边框，每次该框重绘时边框颜色都会改变。

这种旋转的彩虹色有助于发现应用程序中重绘过于频繁并可能损害性能的部分。

例如，一个小动画可能导致整个页面在每一帧都重绘。将动画包装在RepaintBoundary widget中将重绘限制在仅动画部分。

此处进度指示器导致其容器重绘

class EverythingRepaintsPage extends StatelessWidget {
  const EverythingRepaintsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Repaint Example')),
      body: const Center(child: CircularProgressIndicator()),
    );
  }
}

将进度指示器包装在RepaintBoundary中会导致屏幕只有该部分重绘

class AreaRepaintsPage extends StatelessWidget {
  const AreaRepaintsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Repaint Example')),
      body: const Center(
        child: RepaintBoundary(child: CircularProgressIndicator()),
      ),
    );
  }
}

RepaintBoundary widget 有取舍。它们可以帮助提高性能，但也会带来创建新画布的开销，这会占用额外的内存。

您也可以在代码中启用此选项

import 'package:flutter/rendering.dart';

void highlightRepaints() {
  debugRepaintRainbowEnabled = true;
}

此选项通过反转图像颜色并垂直翻转图像来高亮显示过大的图像

高亮的图像使用的内存超出所需；例如，一张 5MB 的大图，却显示为 100 x 100 像素。

此类图像可能导致性能不佳，特别是在低端设备上以及当您有许多图像时（例如在列表视图中），这种性能损失会累积。每张图像的信息都会打印在调试控制台中

dash.png has a display size of 213×392 but a decode size of 2130×392, which uses an additional 2542KB.

如果图像使用的内存比所需多至少 128KB，则被视为过大。

在可能的情况下，解决此问题的最佳方法是缩小图像资产文件。

如果无法做到这一点，您可以在Image构造函数上使用cacheHeight和cacheWidth参数

class ResizedImage extends StatelessWidget {
  const ResizedImage({super.key});

  @override
  Widget build(BuildContext context) {
    return Image.asset('dash.png', cacheHeight: 213, cacheWidth: 392);
  }
}

这使得引擎以指定大小解码此图像，并减少内存使用（解码和存储仍然比图像资产本身缩小更昂贵）。无论这些参数如何，图像都将根据布局或宽度和高度的约束进行渲染。

此属性也可以在代码中设置

void showOversizedImages() {
  debugInvertOversizedImages = true;
}

您可以在以下链接中了解更多信息

• Flutter 文档：debugInvertOversizedImages

选择Widget 详情树选项卡以显示所选 widget 的详情树。从这里，您可以收集有关 widget 属性、渲染对象和子项的有用信息。

Flutter 检查器的一部分功能基于对应用程序代码进行插桩，以便更好地理解 widget 创建的源位置。源插桩允许 Flutter 检查器以类似于 UI 在您的源代码中定义的方式呈现 widget 树。没有它，widget 树中的节点树会更深，并且可能更难理解运行时 widget 层次结构如何对应于您的应用程序 UI。

您可以通过向flutter run命令传递--no-track-widget-creation来禁用此功能。

以下是启用和禁用跟踪 widget 创建时 widget 树可能显示样式的示例。

跟踪 widget 创建已启用（默认）

跟踪 widget 创建已禁用（不推荐）

此功能可防止在调试构建中将原本相同的const widget 视为相等。有关更多详细信息，请参阅调试常见问题的讨论。

将鼠标悬停在任何 widget 上都会显示其属性和值。

切换此值可启用或禁用悬停检查功能。

默认情况下，DevTools 将 widget 树中显示的 widget 限制为来自项目根目录和 Flutter 的 widget。此过滤仅适用于检查器 widget 树（检查器左侧）中的 widget，不适用于 widget 详情树（检查器右侧，与布局浏览器在同一选项卡视图中）。在 widget 详情树中，您可以查看所有包中所有 widget 树的 widget。

为了显示其他 widget，必须将其父目录添加到包目录中。

例如，考虑以下目录结构

project_foo
  pkgs
    project_foo_app
    widgets_A
    widgets_B

从project_foo_app运行您的应用程序只会显示来自project_foo/pkgs/project_foo_app的 widget 在 widget 检查器树中。

要在 widget 树中显示来自widgets_A的 widget，请将project_foo/pkgs/widgets_A添加到包目录中。

要在 widget 树中显示项目根目录中的所有 widget，请将project_foo添加到包目录中。

对包目录的更改会在下次为应用程序打开 widget 检查器时保留。

有关检查器通常可能实现的功能的演示，请参阅DartConf 2018 演讲，其中演示了 IntelliJ 版本的 Flutter 检查器。

要了解如何使用 DevTools 可视化调试布局问题，请查看指导性的Flutter 检查器教程。