背景
做过移动端开发的都知道，Android 和iOS在开发时可以查看页面的图层结构，RN也可以很方便的查看图层结构进行调试，那flutter如何进行可视化调试呢？
可视化调试
其实flutter官网上对可视化调试已有相关的介绍《Flutter中文网》。
flutter的rendering库中提供了一些标志位，可以通过设置标志位为true来进行可视化调试。 这些标志可以在任何时候启用，并在为true时影响绘制。 设置它的最简单方法是在void main()的顶部设置。
以下代码只粘出了部分标志位：
/// Causes each RenderBox to paint a box around its bounds, and some extra
/// boxes, such as [RenderPadding], to draw construction lines.
///
/// The edges of the boxes are painted as a one-pixel-thick `const Color(0xFF00FFFF)` outline.
///
/// Spacing is painted as a solid `const Color(0x90909090)` area.
///
/// Padding is filled in solid `const Color(0x900090FF)`, with the inner edge
/// outlined in `const Color(0xFF0090FF)`, using [debugPaintPadding].
bool debugPaintSizeEnabled = false;
/// Causes each RenderBox to paint a line at each of its baselines.
bool debugPaintBaselinesEnabled = false;
/// Causes each Layer to paint a box around its bounds.
bool debugPaintLayerBordersEnabled = false;
/// Causes objects like [RenderPointerListener] to flash while they are being
/// tapped. This can be useful to see how large the hit box is, e.g. when
/// debugging buttons that are harder to hit than expected.
///
/// For details on how to support this in your [RenderBox] subclass, see
/// [RenderBox.debugHandleEvent].
bool debugPaintPointersEnabled = false;
/// Overlay a rotating set of colors when repainting layers in checked mode.
///
/// See also:
///
/// * [RepaintBoundary], which can be used to contain repaints when unchanged
/// areas are being excessively repainted.
bool debugRepaintRainbowEnabled = false;
/// Overlay a rotating set of colors when repainting text in checked mode.
bool debugRepaintTextRainbowEnabled = false;
所有这些标志只能在调试模式下工作。通常，Flutter框架中以“debug...” 开头的任何内容都只能在调试模式下工作。
debugPaintSizeEnabled启用时，所有的盒子都会得到一个明亮的深青色边框，padding（来自widget如Padding）显示为浅蓝色，子widget周围有一个深蓝色框， 对齐方式（来自widget如Center和Align）显示为黄色箭头. 空白（如没有任何子节点的Container）以灰色显示。
debugPaintBaselinesEnabled做了类似的事情，但对于具有基线的对象，文字基线以绿色显示，表意(ideographic)基线以橙色显示。
debugPaintPointersEnabled标志打开一个特殊模式，任何正在点击的对象都会以深青色突出显示。 这可以帮助您确定某个对象是否以某种不正确地方式进行hit测试（Flutter检测点击的位置是否有能响应用户操作的widget）,例如，如果它实际上超出了其父项的范围，首先不会考虑通过hit测试。
如果您尝试调试合成图层，例如以确定是否以及在何处添加RepaintBoundary widget，则可以使用debugPaintLayerBordersEnabled 标志， 该标志用橙色或轮廓线标出每个层的边界，或者使用debugRepaintRainbowEnabled标志， 只要他们重绘时，这会使该层被一组旋转色所覆盖。
使用步骤
如果使用的是AndroidStudio
1.首先第一步要导入render库
import 'package:flutter/rendering.dart';
2.在任意函数内设置标志位即可，例如
void main() {
// debugPaintSizeEnabled = true;
// debugPaintPointersEnabled = true;
// debugPaintLayerBordersEnabled = true;
debugRepaintRainbowEnabled = true;
return runApp(MyApp());
}
3.重新运行即可看到效果
如果使用的是VSCode
在VS Code中，只需要在Flutter App调试的过程中，打开命令面板（cmd+shift+p）,输入
Flutter Toggle Debug Painting
效果图
原图.gif
1. debugPaintSizeEnabled
展示所有盒子范围
debugPaintSizeEnabled.gif
2. debugPaintPointersEnabled
展示可点击区域范围
debugPaintPointersEnabled.gif
3. debugPaintLayerBordersEnabled
所有layer展示橙色边框
debugPaintLayerBordersEnabled.gif
4. debugRepaintRainbowEnabled
炫彩边框效果
debugRepaintRainbowEnabled.gif
网友评论