Inspector工具浏览Flutter的widget树

Flutter框架使用widget作为核心构建块，从控件（文本、按钮、toggle等）到布局（居中、填充、行、列等）的任何内容都是widget。Inspector是用于可视化和浏览Flutter这些widget树的强大工具。

使用Flutter开发，可能对于传统的app开发有点不习惯，尤其是在布局方面，传统的app开发，使用xml布局是很直观，很灵活的，到了Flutter时，可能由于要跨平台，就没有了，通通都用Widget在代码里里表示，那么如何查看我们用代码写出来的布局是怎样的呢？尤其是在我们在排查问题时。可以借助Inspector这个工具来浏览Flutter的widget树。

• 安装Flutter和Dart插件
  Flutter插件： 支持Flutter开发工作流 (运行、调试、热重载等).
  Dart插件： 提供代码分析 (输入代码时进行验证、代码补全等).
  安装步骤:
  （1）启动Android Studio，打开插件首选项 (macOS：Preferences>Plugins , Windows ＆ Linux：File>Settings>Plugins)
  （2）选择 Browse repositories…, 选择 Flutter 插件并点击 install
  （3）重启Android Studio后插件生效

• 使用Inspector
  使用步骤：
  （1）安装app到移动端
  （2）Android studio的右侧边栏，点击Flutter Inspector,就可以用了：
  诊断布局问题：
  点击Flutter Inspector工具栏上的“Select widget”，然后点击设备(真机或虚拟机)以选择一个widget。所选widget将在设备和widget树中高亮显示。

• ‘切换 Select Widget 模式’: 在设备上选择一个widget以在Flutter Inspector中对其进行检查。

• ‘切换 Debug Paint’: 显示Widget布局边界（包括边框、padding、对齐等）

• ‘切换 Platform’: 在Android或iOS渲染之间切换.

• ‘切换 Performance Overlay’: 显示GPU和CPU线程的性能图.

• ‘打开 Timeline 窗口’: 分析应用程序运行时的活动.

• ‘打开 Observatory’: Dart应用程序的分析器.

文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/weixin_40763897/article/details/108051847