在本Unity教程将介绍的UI Toolkit中的flex -grow和flex -shrink。
简介
UI Toolkit使用基于Flexbox概念的布局系统，UI工具包中的视觉元素Flexbox可以通过使用flex-grow和flex-shrink等属性灵活地排列每个项目 。
flex-grow
考虑一个布局，其中红色、绿色和蓝色的三个VisualElements并排排列，如下所示。
flex -grow最初设置为零，每个尺寸设置为300px、200px、100px，因此它们按该尺寸排列。
此外，整体宽度为900px，因此有300px的额外空间。
将从这个状态开始设置flex -grow
设置flex -grow时，为每个VisualElement设置的flex -grow值作为权重，剩余部分的大小作为每个VisualElement的大小分配。
例如，如果将所Visual Elements的flex -grow设置为1，则300px的剩余部分将按100分配给每个VisualElement，从而产生以下布局。
换句话说，如果将每个VisualElement的宽度设置为零，同时将flex -grow设置为 1，则所有VisualElement将像这样均匀布局：
此外，VisualElement的大小会根据其子元素而变化。
例如，从上面的状态，放置一个宽度为300px的按钮作为绿色VisualElement的子元素，如下所示。
在这种情况下，绿色VisualElement的大小将为300，因此剩余的900-300=600px将按200px分配给每个元素。
另外，如上所述，flex -grow表示重量，因此如果如下所示更改每个VisualElement的值，布局将根据该值发生变化。
flex-shrink
上面说了，flex -grow的意思是如何分配多余的部分。另一方面，flex -shrink表示如何处理溢出部分。
例如，考虑一个突出300像素的布局，如下所示。
parent的宽度是900，三个children的VisualElements各400px，所以从parent突出了300px，flex -shrink全部为零。
在这种情况下，如果在每个VisualElement上设置flex -shrink，则可以指定收缩多少以使其不突出的权重。
比如下图就是从上面的状态分别设置flex -shrink为1、2、3的状态。
可以看到每个元素都收缩了，不至于溢出，并且收缩率随着flex -shrink值的增加而增加。
弹性基础
除了以上两个属性外，还有一个属性叫做flex -basis。
这允许覆盖计算flex -grow和flex -shrink时使用的每个VisualElement的基本大小。
例如，考虑如下所示的布局。红蓝base size都是0，green base size是300，flex -grow都是1。
这时，如果Green的flex -basis设置为0，则flex -grow是在该VisualElement设置为0的情况下计算的。
如上所述，红色和蓝色基本尺寸最初为零，因此将绿色基本尺寸设置为零也会导致所有三个VisualElements均匀布局。
…
以上是3D天堂网关于Unity中UI工具flex-grow和flex-shrink知识的全部内容，如果你有任何反馈，请随时在本页面下方留言。