UGUI简单易懂理解Layout Element组件

Layout Element组件需要结合Layout Group的Control Child Size功能使用，以Height为例；

假设父节点A的Height=100，其下有两个Child（a、b）

Min Height：最小高度

  • 实际高度<Min Height时，强制以Min Height为准，这个准则最高；

Preferred Height：期望高度

  • 空间足够分配时，Height=Math.Max(MinHeight，PreferredHeight），即如果PreferredHeight<MinHeight，以MinHeight为准；
  • 全部Child的PreferredHeight之和，不能超过父节点高度；

案例：a的Preferred Height=100，b的Preferred Height=100，那么就会按比重分配，a、b的Height均为50，即Height=A_Height * a_PreferredHeight/（a_PreferredHeight + b_PreferredHeight）

  • 如果同时设置Min Height和Preferred Height，两种情况：
  1. 全部Child的Preferred Height之和，小于父节点高度，则相安无事，a、b各按自己的Preferred Height设置，但Preferred Height低于Min Height，以Min Height为准；
  2. 全部Child的Preferred Height之和，大于父节点高度，按计算公式Height=A_Height * （a_PreferredHeight+a_MinHeight）/（a_PreferredHeight + a_MinHeight + b_PreferredHeight），为什么把PreferredHeight和MinHeight叠加计算，我也不知道；

Flexible Height：剩余空间填满比重

  • 全部Child的Preferred Height之和，小于父节点高度，即父节点还有空间没有占满，就会把剩余空间按Flexible Height比重分配；

案例：a的Preferred Height=50、Flexible Height=1，b的Preferred Height=30、Flexible Height=3，则还剩余20高度，20高度再按1/4和3/4比例分配给a和b，最终a_Height：50+5=55，b_Height：30+15=45，很好理解；

  • 全部Child的Preferred Height之和，大于父节点高度，没有剩余空间，Flexible Height不起作用；

既然是做文字游戏，排版可是重点技巧，Layout Group和Layout Element梳理之后，排版算是比较得心应手了！

posted @ 2022-06-17 00:40  qianxun0975  阅读(484)  评论(0)  编辑  收藏  举报