unity列表控件Horizontal/Vertical/Grid Layout Group用法介绍

1. Grid Layout Group

为Panel控件添加Grid Layout Group，子控件为四个按钮，分别为Grid，Calendar，Gear，User：

默认属性为

为方便演示，按钮的底色为控件自带image，按钮上面的图标为其子控件image：

 

显示效果为：

 

Padding为设置父控件内部与子控件周围的空白间隙，好比这样设置：

显示效果：

 

cell size为子控件大小，spacing为彼此之间的空白：

显示效果为：

Start Corner为子控件排列起始点，（排列方式和数量由Start Axis和Constraint决定，后面再说）默认为先从左到右排满一行再排列下一行：

Start Corner设为Upper Right会发现，按钮控件先从最右上角开始排列，从右往左排满一行再到下一行继续从右往左排列：

效果：

Start Corner设为Lower Left为控件先从左往右排列，排满一行再到上一行继续从左往右排列：

 

Start Corner设为Lower Right以此类推。

Start Axis则决定了是先水平排仍是先垂直排，若是设为Vertical（垂直排列），配合Upper Left，效果则为先垂直从上到下排满最左边一列，再去排下一列：

 

child Alignment很简单，设定子控件在父控件内部的位置：

好比设为Middle Left，效果就是这样的，其余以此类推：

 

Constraint的第一个Flexible即响应式，根据宽度自动决定每行数量

 

 

Fixed Colomn Count则强制规定列的数量，搭配Start Corner和Start Axis使用。

好比将Constraint Count设为1，Start Corner为Upper Right，Start Axis为Verical，就是只有一列，从右上角开始排列，垂直排满一列：

将Constraint Count设为2，Start Corner和Start Axis不变，就是垂直排为两列，从右上角开始排列，先垂直排列，再水平排列，第一个按钮在右上角，第二个按钮在右下角：

将Constraint Count设为3，Start Corner和Start Axis不变，此时效果不变，缘由是控件将垂直排为三列，每列一个控件，会排为四列，因此每一列只能设为两个控件，但根据排列顺序，要先排满一列，才会去排下一列，因此右侧的两列每列一个控件以后，最左侧的第三列就空着了：

其他配置保持不变，将Start Axis改成Horizontal（水平），效果为这样，这就比较好理解了，是从右上角先水平排列，排满一行（三列）以后排第二行：

 

Fixed Row Count与此相似，只不过限定的是行数：

 

 

 

2. Horizontal Layout Group

水平分割布局控件

Padding和Spacing与Grid Layout Group的功能相似，再也不赘述。

Child Alignment设定子控件在父控件内部的位置，将Child Control Size和Child Force Expand全部选项都勾掉，此时子控件的长宽能够自由设定，切换Child Alignment，能够看到子控件的位置在变化：

 

 

Child Force Expand设置子控件是否均匀分布于父控件内部，好比勾选Child Force Expand-Width以后的效果：

 

 

取消勾选Child Force Expand-Width以后的效果：

能够看到，勾选以后虽然子控件能够根据父控件的宽度均匀分布在其内部，但却没有填满。若是须要填满父控件，则能够同时勾选Child Force Expand-Width和Child Controls Size-Width：

同时勾选Child Force Expand-Height和Child Controls Size-Height则能够在高度上填满父控件：

 

若是只勾选Child Controls Size不勾选Child Force Expand会怎样？子控件的宽度或高度会强制变为0，因此通常Child Controls Size是搭配Child Force Expand使用：

 

3. Vertical Layout Group

与Horizontal Layout Group相似。