Flutter之Layout Explorer初体验

最近使用一个名为Layout Explorer的工具，我想分享一下使用它的Top前三种方法。

许多Flutter布局使用Row或Column。它们是Flex小部件的子类，它允许您表达布局约束，而不管您的屏幕尺寸如何。

但是您在使用基于Flex的小部件（如Row或Column）时是否遇到过溢出问题？当您发现您的UI中出现黑黄条纹警告时，您是否不确定该怎么做？

别担心，现在有工具可以帮助您了解基于Flex的小部件的布局过程。

使用Layout Explorer,您将能够直观地了解您的Flex布局并尝试更改Flex属性。 您还可以不对代码进行任何更改的情况下实时查看更新呈现。

让我们深入了解使用布局资源管理器的这三种方法。

第一、您可以随时使用布局资源管理器来调试溢出错，并可能通过使用Flex Factor来修复它们。

在左侧打开了布局资源管理器，在右侧打开了一个出现溢出错误的示例应用程序

在这个例子中，溢出错误是因为Text小部件太大。

并且没有包裹在Flexible或Expand的小部件中，导致小部件的Flex Factor为空。

将Flex Factor从null更改为1可以解决溢出问题。

第二、有没有想过为什么更改mainAxisAlignment或crossAxisAlignment似乎对您的应用没有任何影响？

布局资源管理器将通过可视化小部件的可用空间帮助您了解mainAxisAlignment和crossAxisAlignment。

第三、您撒是否希望你的UI具有响应性，但不确定是使用Expanded还是Flexible小部件？

使用布局资管管理器，您可通过过使用FlexFit属性来探索这两者的区别：