debugPaintSizeEnabled Flutter显示布局

最新推荐文章于 2024-05-11 10:30:39 发布
置顶 最新推荐文章于 2024-05-11 10:30:39 发布
阅读量2.8k 收藏 1
点赞数 1
分类专栏： Flutter 文章标签： flutter debugPaintSizeEnabled 显示布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012346890/article/details/99553887
版权

有时候我们想要像Android一样可以显示的看到自己布局的情况，那么很简单只需要设置---->系统---->开发者选项---->显示边界布局(选中)

就OK了，类似下图：

那么在Flutter种有没有类似的操作呢？答案是有的：

debugPaintSizeEnabled = true; //显示边界布局然后自动import即可

Alex_ChuTT
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Flutter中如何开启界面绘制边界线：debugPaintSizeEnabled = true
BINGXIHEART的博客
07-08 5080
效果图在最下面 import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; // 1.第一步 import 'login.dart'; void main() { debugPaintSizeEnabled = true; //2.第二步 runApp(MyApp()); } cl...
Flutter学习笔记之 调试界面画布布局边界
单片机菜鸟哥的博客
12-01 1549
设置debugPaintSizeEnabled为true来更直观的调试布局问题 第一步:先导入rendering.dart import 'package:flutter/rendering.dart'; 第二步：设置main入口 void main() { //设置debugPaintSizeEnabled为true来更直观的调试布局问题 debugPaintSizeEnabled=true; runApp(new MyApp()); } 以上两步打开，即可看到手机页面上出现各种框框条条，
Flutter 显示控件边界
最新发布
lxjlxj2333的博客
05-11 170
总结：以下代码都在main.dart中。
Flutter小技巧积累
Zero0King的博客
04-01 291
1，显示更加细致的布局 方法：导入依赖 ：import 'package:flutter/rendering.dart'; 在main函数中添加：debugPaintSizeEnabled = true; 效果：可以显示出各布局准确的分布情况。 缺点：不能单独显示一个Widget里的分布情况，当一个界面Widge较多时，显示不完整且杂乱。 2, Flutter I...
【Flutter】Flutter inspector 工具使用详解，查看Flutter布局，widget树，调试界面等
It一zhai男
07-29 3973
Flutter inspector工具使用详解，查看Flutter布局，widget树，调试界面，界面尺寸查看
Flutter学习四：Flutter开发基础（六）调试Flutter应用
D_lunar的博客
06-30 2029
本文是对的学习和总结。
Flutter 基本布局
01-20
本篇博客大致介绍了通过 Flutter 实现一些简单的页面布局，官方的参考文档： https://flutter.cn/docs/get-started/flutter-for/web-devs 首先，项目的入口如下，后面的所有操作都是对 container 变量进行更改 ...
Flutter 页面布局 Wrap组件
01-07
Wrap组件实现流布局 //导入了Material UI组件库 ,快捷操作fim import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //...
详解Flutter TabLayout 布局用法
08-25
Flutter TabLayout 布局用法详解 Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。TabLayout 是 Flutter 中的一个重要组件，用于实现 tab 样式的导航栏。本文将详细介绍 ...
Flutter布局组件之Align
01-20
flutter通过Stack和Positioned，可以指定一个或多个子元素相对于父元素各个边的精确偏移，并且可以重叠。但如果我们只想简单的调整一个子元素在父元素中的位置的话，使用Align组件会更简单一些。 1.Align Align 组件...
Flutter布局组件
02-24
Flutter中的布局容器主要分为两类：只能包含一个子Widget的布局容器和可以包含多个子Widget的容器，下面分别说明其用法。Center组件中的子组件会居中显示。Center组件会尽可能的大，如果你不给它设置任何约束。下面...
Flutter学习笔记
nishuosh2的博客
07-22 281
1、添加环境变量： export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 2、Dart语言简单学习： 1.变量的声明 var：会根据第一次赋值判断数据类型，编译结束后变量的类型已经确定 dynamic：声明的变量可以在后期改变赋值类型，会提供所有可能的组合 Object：任何对象都可以赋值给Object对象，但是只能使用O..
Flutter学习记录——28.Flutter 调试及 Android 和 iOS 打包
赈川
12-09 3850
文章目录1.Flutter的调试1.1 VS Code 的断点调试1.2 debugger()1.3 debugDumpApp()1.4 debugDumpRenderTree()1.5 debugDumpLayerTree()1.6 debugDumpSemanticsTree()1.7 可视化调试1.8 动画的调试1.9 性能的调试1.10 应用启动时间的查看1.11 代码、方法执行时间查看1...
flutter笔记
阿炳のblog
03-24 778
主流框架对比 Cordova：Cordova基于网页技术进行包装，利用插件的形式开发移动应用的，这点的性能和体验，Flutter完胜 RN(React Native)：RN的效率是由于将View编译成原生View，效率上比Cordova的HTML5高很多，但它也有效率问题：RN的渲染机制是基于前端框架的考虑，复杂UI的渲染需要依赖多个...
如何调试flutter应用
热门推荐
学无止境
12-27 1万+
命令运行app，运行的时候，在控制台可以看到一个Observatory URL(如http://127.0.0.1:8100/)，我们可以通过浏览器打开，直接用语句级的单步调试程序连接到你的应用程序。标志位会打开一种特殊模式，让所有的对象都突出显示，这个可以帮助你发现哪一个对象不能正确的进行测试，比如，某个对象在其父类的范围之外，就不会第一时间被考虑进行命中测试。为true来更直观的调试布局问题，这是渲染库中的一个布尔变量，当该变量为true时，它可以随时生效，并且影响所有地方的绘制。
Flutter学习三：静态页面练习（Row&Column）
sinat_29256651的博客
07-31 818
在Flutter中文网中的练习图如下： 上代码 main.dart： import 'package:flutter/material.dart'; void main() { //debugPaintSizeEnabled = true; runApp(MyApp()); } class MyApp extends StatelessWidget { @overrid...
Flutter的菜鸟教程九:GridView
duo_shine的博客
07-28 9404
本文将介绍一个新的内容 GridView,之前我们使用Container实现了一个网格效果,但只是为了学习组合widget,下面我们将通过GridView来实现网格效果 这里只介绍四种方式 实现网格布局，先看各实现代码,最后有完整版代码 1.extent /** * 1.最常用的网格布局之extent */ Widget _buildGrid1() { return new ...
Flutter介绍
lidongxiu0714
08-24 6835
1.flutter简介 Flutter是Google使用Dart语言开发的移动应用开发框架，使用一套Dart代码就能快速构建高性能、高保真的iOS和Android应用程序，并且在排版、图标、滚动、点击等方面实现零差异。 快速开发： 毫秒级的热重载，修改后，您的应用界面会立即更新。使用丰富的、完全可定制的widget在几分钟内构建原生界面。 富有表现力和灵活的UI： 快速发布聚焦于原生体验...
flutter 两列布局
09-11
Flutter中的两列布局可以通过使用Row和Column来实现。Row是一个水平排列的容器，Column是一个垂直排列的容器。 要创建一个包含两列的布局，可以在Row或Column中嵌套两个子容器。例如，要创建一个水平排列的两列布局...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Alex_ChuTT

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值