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又是另一个话题,这里便不细述了。

posted @ 2022-06-16 15:28  qianxun0975  阅读(554)  评论(0编辑  收藏  举报