UGUI嵌套布局组件的Control Child Size应用技巧

 

首先是需求描述：

1、整个界面信息需要放在一个Scroll View中，Content设置Vertical Layout Group和Content Size Fitter组件，即整体需要按竖向列表布局，自适应内容高度；

2、BaseInfo、Part、Quality、Real是单行信息；

3、BaseAttribute、ExtraAttribute、RareAttribute、Entry是多行信息，而且属性条数和词条数量不定，需要按条数自适应高度；

4、Desc、Story读取配置描述，文本高度需要自适应；

显示效果如下：

---

外围Content已经设置了Content Size Fitter，子Child和孙Child再设置这个组件的话，因为刷新时机机制，导致显示显示不正常，应该摒弃嵌套Content Size Fitter的思路。

这个时候需要用到Layout Group的Control Child Size功能，

Vertical和Horizontal这两个Layout Group和Grid Layout Group不同，Grid需要指定具体的宽高值控制Child尺寸，而Vertical和Horizontal勾选这个选项之后，是按自适应尺寸来控制Child尺寸，类似Content Size Fitter效果。

但是可能会懵逼的地方在于单纯外层Content勾选之后，出现以下现象：

高度变成0了，Why？！到这一步我就去查百度，但是网上大部分说的比较模糊，请教朋友之后，才知道Content只控制子节点的高度，但是子节点只是一个负责管理孙节点的空节点，于是识别成0高度，那么给空节点同样也添加布局组件，需要以下操作：

• BaseInfo：包含2个横向节点，设置Horizontal Layout Group，勾选Control Child Size；
• Part、Quality、Realm直接是文本，不用额外管理；
• BaseAttribute、ExtraAttribute、RareAttribute、Entry：包含2个横向节点，设置Horizontal Layout Group，勾选Control Child Size；

嵌套的AttributeList节点包含竖向列表，设置Vertical Layout Group，勾选Control Child Size；

• Desc、Story：包含2个竖向节点，设置Vertical Layout Group，勾选Control Child Size；

自此，所有节点就都受到了Control Child Size管理，能够正常显示，而且不需要代码动态设置高度，实现需求！

---

这种方式会将内容控制成紧凑的自适应高度，按20字号大小，单行高度大概在23px，如果希望文本高度保持单行50px，则需要将每个文本节点添加Layout Element组件，设置Min Height=50，这样的话，就不会按自适应的23px而是至少50px高度。

不过Layout Element又是另一个话题，这里便不细述了。