用三图让你懂Flutter中的Flexible和Expanded的区别

Flexible和Expanded的区别

Flexible和Expanded都是Flutter中用于控制子控件在父控件中布局的容器布局控件。它们都有一个flex属性，用于指定子控件在父控件中占据的空间比例。

但是，Flexible和Expanded在以下几个方面存在区别：

• 强制填充剩余留白空间 ：Expanded会强制填充父控件中剩余的留白空间，而Flexible不会。
• 最大最小宽高 ：Expanded可以指定子控件的最大最小宽高，而Flexible不可以。
• 长宽比 ：Expanded可以指定子控件的长宽比，而Flexible不可以。

三图对比

下图是Flexible和Expanded在不同情况下的布局效果对比。

从上图可以看出，Flexible和Expanded在以下几个情况下的布局效果不同：

• 父控件没有剩余留白空间 ：在这种情况下，Flexible和Expanded的布局效果相同。
• 父控件有剩余留白空间 ：在这种情况下，Expanded会强制填充剩余的留白空间，而Flexible不会。
• 子控件具有最大最小宽高 ：在这种情况下，Expanded会根据子控件的最大最小宽高来确定子控件的实际大小，而Flexible不会。
• 子控件具有长宽比 ：在这种情况下，Expanded会根据子控件的长宽比来确定子控件的实际大小，而Flexible不会。

总结

通过上面的对比，我们可以总结出Flexible和Expanded的区别如下：

特性	Flexible	Expanded
强制填充剩余留白空间	否	是
最大最小宽高	不可指定	可指定
长宽比	不可指定	可指定

使用建议

在实际开发中，我们可以根据不同的需求来选择使用Flexible还是Expanded。

• 如果需要子控件强制填充父控件中剩余的留白空间 ，则可以使用Expanded。
• 如果需要子控件具有最大最小宽高 ，则可以使用Expanded。
• 如果需要子控件具有长宽比 ，则可以使用Expanded。
• 如果不需要上述任何特性 ，则可以使用Flexible。

希望这篇文章能帮助您理解Flutter中的Flexible和Expanded的区别，并在您的项目中正确使用它们。