1. 前言

许多朋友可能在布局进程中、或许组件运用进程中，会遇到诸如色彩、尺度、束缚、定位等问题，可能会让你抓耳挠腮。俗话说，磨刀不误砍柴工，会运用东西是十分重要的，其实 Flutter 供给了强大的调试东西，能够辅助咱们去检查界面布局中的全部细节。

依据这些细节，能够很轻松地去处理布局相关的疑难杂症。 也能让咱们对界面的布局有更深刻的认知，这便是 ： Flutter Inspector ，如果你运用 AndroidStudio，能够在如下的侧栏选项卡中翻开：

注: 本文有 Blibli 视频版，食用作用更加： www.bilibili.com/video/BV1Rz…

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

光溜溜地介绍怎样运用的话，或许太过无聊；下面就经过一个实践的小问题的处理进程，来叙述一下怎样经过 Flutter Inspector 来剖析界面结构和寻找要害源码。如下所示，左下角的菜单弹框，在 useMaterial3 下呈紫色，而 PopupMenuButton 并没有直接修正弹出框布景色的配置项。接下来将经过布局剖析器，来处理如下几个问题：

  1. PopupMenuButton 弹出菜单，其布景是何时、怎样着色的。
  2. 怎样修正弹出菜单的布景色。
  3. 弹出菜单在界面树形结构中，处于哪个层级。

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

本文详细源码就不贴了，跑起来之后和本文一同运用 Flutter Inspector 来剖析。源码地址在:

LoveNote520/LoveNote: 提交节点

2. Flutter Inspector 窗口根本介绍

首先，需要将使用运行起来， Flutter Inspector 才能展现信息。如下所示，映入眼帘的主要有三个部分

[1]. 顶部的操作东西栏。
[2]. 左边的组件树信息。
[3]. 右侧的选中组件的概况信息。

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

首先着重一下，左边的树形结构中每个组件条目，对应着右侧的一个面板。也便是说，你每逢点击一个左边组件树中的节点，右侧的面板信息就会更新:

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

其间右侧面板 Layout Explorer 可视化地展现出:

[1]. 当时组件对应的烘托目标树，遭到的 父级束缚
[2]. 当时组件对应的烘托目标树，其在界面中的 尺度
[3]. 当时组件对应的烘托目标树，向子级的 传递束缚

如果看过 《Flutter 布局探索 – 薪火相传》 的朋友，不难理解，关于布局来说 父级束缚、尺度、传递束缚 这三者是何其重要。而 Layout Explorer 可视化地将这些信息展现出来，就十分便于咱们去剖析布局的细节。

在面板右侧，有一个 Widget Datails Tree 的选项卡，是极其重要而有用的。同样，你每逢点击一个左边组件树中的节点，Widget Datails Tree 信息也会更新。其间能够展现某个 Widget 构建进程中的所有细节，包含 dependencies 依赖、state 状态类、properties 调试特点、Widget 派生类的所有特点。

以及最重要的 某个 Widget 对应的烘托目标 renderObject，从烘托目标中，能够进一步剖析束缚、尺度、数据等信息。细致入微地去了解当时界面中展现的逻辑，这样从内部寻找病因，就能更精准地对症下药。

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

3. 选择模式与详细组件剖析

选择模式 Select Widget Model 是一个十分好用的东西。如下所示，点击之后，能够在使用界面中点一下，面板在就能够主动选中被点击的组件。这就能够大大提高检查界面视图中每个组件构建信息的功率，不用一个个自己手动去找。

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

如下所示，往上翻一下，就能够很简单定位到色彩的来源，PopupMenuButton 弹出框的视图，由源码内部的 _PopupMenu 组件所构建，其间布景色由 Material 组件所设置。

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

所以，此时大局查找一下 _PopupMenu 组件，看看运用 Material 组件时色彩怎样传递的就能够了。如下所示，色彩值是三个：依次取用 路由色彩、弹框主题色、默许色彩。

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

从源码中不难看出，PopupMenuTheme 能够设置这里的布景色彩；如果没有主题色，将会取用 defaults 主题数据，这里依据 useMaterial3 来确认的，这便是主题中 useMaterial3 能够影响弹框色彩的根本原因。

---->[_PopupMenu#build]----
final ThemeData theme = Theme.of(context);
final PopupMenuThemeData popupMenuTheme = PopupMenuTheme.of(context);
final PopupMenuThemeData defaults = theme.useMaterial3 ? _PopupMenuDefaultsM3(context) : _PopupMenuDefaultsM2(context);

3. 修正弹框色彩

有了上面的布局、源码剖析之后，弹出框的布景色就很好修正了: 如下所示，供给 popupMenuTheme ，设置白色布景即可：

theme: ThemeData(
  fontFamily: 'aldk',
  colorSchemeSeed: const Color(0xff6750a4),
  popupMenuTheme: PopupMenuThemeData(
    color: Colors.white,
  ),
  useMaterial3: true,
),

如下所示，color 尽管设成了白色，可是弹框布景肉眼看起来很明显不是白色。不过看起来没有之前那么紫了，也便是说只设置 popupMenuTheme 的色彩，有一点用，可是不多。这是什么原因呢?

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

前面说了，全部界面展现中存在的问题，都能够经过 Flutter Inspector 来剖析。能够先用拾色器看一下，色彩是 F3F1F7，确实不是白色。

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

如下所示，能够看出 Material 内部运用了 PhysicalShape 组件，其色彩恰是 F3F1F7 。这就阐明 Material 的色彩并不仅仅是由 color 特点决议的，肯定和其他色彩混合了一下。下面就看一下源码中对色彩的处理逻辑。

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

下面是 Material 组件中的源码完成，能够很清晰的看出 useMaterial3 下，AnimatedPhysicalModel 的色彩是由 backgroundColor (Material#color) 和 surfaceTintColor 以及 elevation 一起决议的。

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

色彩的换算进程由 ElevationOverlay.applySurfaceTint 处理，经过如下代码不难看出 surfaceTint 设为 null 或透明，就能够防止其对色彩的影响。

static Color applySurfaceTint(Color color, Color? surfaceTint, double elevation) {
  if (surfaceTint != null && surfaceTint != Colors.transparent) {
    return Color.alphaBlend(surfaceTint.withOpacity(_surfaceTintOpacityForElevation(elevation)), color);
  }
  return color;
}

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

关于任何界面展现作用的问题，都能够经过 Flutter Inspector 来剖析、定位问题所在，再检查相关的源码来处理。这便是经过 处理问题 ，进行探索和学习。或许有时候处理方案很简单，但进程中你会学得的更多。比如经过布局剖析器检查时，你会发现：弹框是一个在 MaterialApp 下的独立路由，经过 _OverlayEntryWidget 挂在 _Theater 下显示，咱们的使用界面也是一个 _OverlayEntryWidget 。这就不再展开了，有时机专门介绍一下。

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

这种处理问题流程中积攒的经历，将是十分名贵的，它能够让你看清问题的本源所在，对全体有更好的掌握。那本文就到这了，谢谢观看 ~