使用Flutter inspector

注意: inspector 可以在 Flutter mobile 和 web 程序中工作.

它是什么?

Flutter小部件检查器是可视化和探索Flutter小部件树的强大工具。Flutter 框架使用组件作为核心构建模块 ,从控件 (例如text, buttons, 和 toggles), 到布局 (如居中, padding, rows, 和 columns). inspector帮助你可视化并且浏览Flutter 组件树, 有如下作用:

理解现有布局
诊断布局问题

使用Flutter inspector

开始

调试布局问题, 以 debug 模式运行app并且通过点击DevTools 工具栏上的Flutter inspector打开inspector .

注意: 你可以直接在 Android Studio/IntelliJ,中使用 Flutter inspector, 但在浏览器中访问界面更宽敞. 还要注意，检查器的UI在这些环境之间略有不同。此页描述检查器DevTools版本的UI。

可视化调试布局问题

以下是检查器工具栏中可用功能的指南。当空间有限时，会只显示一个图标。

选择组件模式

使用Flutter inspector

打开该按钮，可以选择一个组件，并进行 inspect.更多信息，查看 Inspecting a widget.

刷新组件树

使用Flutter inspector

重新加载组件信息.

性能面板

使用Flutter inspector

切换切换GPU和CPU线程的性能图显示. 更多关于这些图表的信息，查看 The performance overlay in Flutter performance profiling.

iOS

使用Flutter inspector

切换Android和ios渲染和手势行为.

Debug Paint

使用Flutter inspector

为borders, padding, alignment, and spacers.添加可视化提示

绘制 Baselines

使用Flutter inspector

使每个RenderBox在其每个文本基线上绘制一行。

减慢 Animations

使用Flutter inspector

减慢动画，以便于可视化调试

Repaint Rainbow

使用Flutter inspector

重新绘制时显示转换颜色.

Debug Mode Banner

使用Flutter inspector

切换右上角debug标记的显示

Inspecting 一个组件

你可以浏览组件树，查看附近的组件和他们的值。

要在组件树中定位各个UI元素, 点击toolbar 中的Select Widget Mode 按钮 . 这切换到组件选择模式. 点击app上任何的仍和组件; 会滚动到组件树中该元素对应的该节点.

当调试 layout 问题, 主要看 size 和 constraints .约束沿着树向下流动，而大小则向上流动。

Flutter Layout Explorer

注意：此功能仅在alpha版本的 DevTools written in Flutter 中可用.

Flutter Layout Explorer 帮助你更好的理解 Flutter 布局.目前， Layout Explorer 只支持探测 flex 布局, 将来可能会扩展其他类型的布局.

使用 Layout Explorer

在Flutter Inspector中, 选择一个flex 组件 (例如, Row, Column, Flex, 等.) 或者 flex 组件的直接子元素. 如果你在使用 Flutter 1.12.16 及以后版本, 你会看到有一个 “Layout Explorer” tab . 选择该tab,会展示 Layout Explorer 功能.

使用Flutter inspector

Layout Explorer 可视化了 Flex 组件和他们的子元素布局方式. explorer 标识了主轴和纵轴, 还有对齐方式 (如 start, end, spaceBetween, 等.). 他显示了flex 和布局容器的细节.

此外，资源管理器还显示布局约束冲突和呈现溢出错误。违反的布局约束被染成红色，溢出错误以标准的“黄带”模式显示，正如您在运行的设备上看到的那样. 这些可视化的目的是提高对溢出错误发生的原因以及如何修复它们的理解。

(图片太大，超出限制，自己复制地址到浏览器看)

https://flutter.dev/assets/tools/devtools/layout_explorer_errors_and_device-3d9dca72160d0b110d30a3229b391a5448c690fb1616abdb9bb0c0a442ecc2e4.gif

在layout exporler 上点击组件会映射到设备 inspector. 这需要打开“Select Widget Mode” . 点击下面按钮

使用Flutter inspector

对于某些特性（如flex factor和alignment），可以通过explorer中的下拉列表修改该值。您将看到新值不仅反映在Layout explorer 中，还反映在运行Flutter应用程序的设备上。 explorer 动画属性修改以及表现很清晰. 这些修改不会更改源代码，并在热重新加载时还原。

交互属性

Layout Explorer 支持修改 mainAxisAlignment, crossAxisAlignment, 和FlexParentData.flex. 将来, 我们可能会支持其他属性如 mainAxisSize, textDirection, 和 FlexParentData.fit.

mainAxisAlignment

(图片太大，超出限制，自己复制地址到浏览器看)

https://flutter.dev/assets/tools/devtools/layout_explorer_main_axis_alignment-f7a5366e773f3754bfcd44b7928f766e0657b8862e40579b8930d6a869fb634f.gif

支持值: