Flutter2.X学习之路--调试页面布局好用的办法

Flutter里有个很好用的东西，可以方便我们来进行页面组件的布局调试，话不多说，上代码

1.找到main.dart引入rendering.dart

import 'package:flutter/rendering.dart';

2.添加main入口页面调试代码

void main() {
  // 调试布局重点代码
  debugPaintSizeEnabled=true;
  runApp(new MyApp());
}

3.如下图所示

![在这里插入图片描述]( https://img-blog.csdnimg.cn/85400085d1bf4c5ba1cefd071fdc1609.png?x-oss-process=image/watermark ,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAdGFuZ2RvdTM2OTA5ODY1NQ==,size_20,color_FFFFFF,t_70,g_se,x_16)

4.使用restart，如果你用的VSCODE编辑器，在编辑器终端中，按大写的R就可以了

![在这里插入图片描述]( https://img-blog.csdnimg.cn/822f689313fd41b4b817d1222d100fb5.png?x-oss-process=image/watermark ,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAdGFuZ2RvdTM2OTA5ODY1NQ==,size_20,color_FFFFFF,t_70,g_se,x_16)

另外再说一下哦，如果你是用的是VSCODE的话，在终端里按p键，可以隐藏这些调试，再按一下又出来了

总之啦，大功告成~~

![在这里插入图片描述]( https://img-blog.csdnimg.cn/bac743600b96415b825b505d68aee400.png?x-oss-process=image/watermark ,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAdGFuZ2RvdTM2OTA5ODY1NQ==,size_20,color_FFFFFF,t_70,g_se,x_16)

posted @ 2021-09-14 23:09  糖~豆豆  阅读(182)  评论(0)    收藏  举报
Live2D