1、首先我们有一个Panel类型的UI对象,是图中白色区域。
我们修改其颜色和不透明度,然后添加Vertical Layout Group组件。
该组件负责对子对象进行垂直方向的布局。

2、我们建立四个子对象,都由预制体PlayerInfPanel产生。
每个子对象都有一个Horizontal Layout Group组件,和前面的相对应,就是水平方向的排版组件。

3、每个PlayerInfPanel又有四个子对象,一个Image,三个Text, 效果如图。这些对象必须添加Layout Element组件才能被父对象的Horizontal Layout Group组件识别和控制。

4、选中PlayerInfPanel对象,在其horizontal Layout Group组件下,有Child Control Size和Child Expand Size两组选项。
如果勾选Child Control Size, 父对象将会拉伸子对象。
如果勾选Child Force Expand, 将不会拉伸子对象,只会改动子对象的位置,让他们尽可能分开。

5、通过设置Child Alignment可以改变子控件对齐方式。如图改为竖直居中,水平靠左。

6、通过Padding设置左右上下的间距。最终效果如图。

