第四十八章 Unity 布局(下)

本章节我们介绍网格布局组 (Grid Layout Group)组件。

我们新建一个“SampleScene5.unity”场景,然后添加Panel面板容器(居中且尺寸为300*300),然后为其添加Grid Layout Group 组件,如下所示

 

Padding  布局组边缘内的填充。这个我们不再详细介绍了。

Cell Size 布局组内每个子UI元素的大小,默认是100*100。我们的Panel的尺寸为300*300,那么就可以放置三行三列,共计9个子UI元素。

Spacing 子UI元素之间的间距。默认值为0即可。

Start Corner 第一个子UI元素所在的位置,默认就是左上角。

Start Axis 沿哪个主轴放置子UI元素。Horizontal 水平方向,Vertical 垂直方向。

Child Alignment 用于子UI元素的对齐方式,默认是左上方对其。

Constraint将网格约束为固定数量的行或列以便支持自动布局系统。它有三个数值:Flexible灵活,Fixed Column Count固定列数,Fixed Row Count固定行数。

接下来,我们就向Panel中依次添加多个Text子UI元素,查看其排列效果。

 

这是我们添加5个Text后的效果,因为我们的尺寸都计算好了,因此是这样的布局方式。假如我们的Panel的宽度设置为400像素的话,我们查看其效果

那么,它将变成一个3行4列的网格布局。

如果我们修改Constraint为Fixed Column Count为3列,如下所示

 

我们发现Panel就回到了3行3列的形式了。虽然父元素有剩余空间,但是没有占据。

本课程涉及的内容已经共享到百度网盘:https://pan.baidu.com/s/1e1jClK3MnN66GlxBmqoJWA?pwd=b2id

猜你喜欢

转载自blog.csdn.net/konkon2012/article/details/130574030