Flutter初探

您所在的位置：网站首页 › 可视化调试 › Flutter初探

Flutter初探

2024-07-17 04:56| 来源: 网络整理| 查看: 265

背景

做过移动端开发的都知道，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

【本文地址】

Flutter初探

Flutter初探

今日新闻

推荐新闻