Flutter开发之诊断布局调试工具:inspector(12)

Flutter inspector 类似Xcode 中查看UI图层的功能。

一、Flutter inspector 工具启动入口

Android Studio 打开Flutter App 工程运行在 iOS 模拟器上。然后Android Studio 窗口左下角的电视按钮,鼠标放上去:如图 选中Flutter inspector 点击
在这里插入图片描述

二、Flutter inspector 使用

inspector是用于可视化和浏览Flutter这些widget树的强大工具。主要用来解决:

  • 理解现有的布局
  • 诊断布局问题

如下图:可以点击widget 控件数,查看对应的布局。可以跳到对应的源码(Source code)位置,方便快速修改!
在这里插入图片描述

Flutter outline
Center widget:快速帮你在这个选中的widget的外面包装一层Center。
Add padding:快速帮你在这个选中的widget的外面包装一层padding。
Warp with Column:快速帮你在这个选中的widget的外面包装一层Column。
Warp with Row:快速帮你在这个选中的widget的外面包装一层Row。
Warp with Container:快速帮你在这个选中的widget的外面包装一层Container。
Extract widget:快速帮你将选中的widget抽取为一个widget类。
Remove widget:移除当前选中widget。

Flutter outline 类似Xcode 中(Snippets)快捷代码块功能能。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值