一.Grid Layout Group 组件
Grid Layout Group：表格(网格)布局组件，可以让数据按表格的形式排列。 Cell Size：子物体尺寸； Spacing：子物体之间的间距； Start Corner：子物体开始的角度位置； Start Axis：子物体开始的轴向； Child Alignment：子物体对其方式； Constraint：约束方式，灵活–灵活列数–灵活行数； Padding：控制所有子物体的整体的外边距。
二.签到页面案例
数据量有限，在一个界面内能直接显示完毕，不需要滑屏滚动。 层级结构： Image [背景图片] |—Grid Layout Group [表格布局组件] |—Item [N 个同级别的子物体] 如图所示,这里EMPTY中的Rect Transform的Width和Height跟BG背景数值一样大。[](http://www.wjgbaby.com/wp-content/uploads/2017/11/17112811.png)
二.背包页面案例
数据量很大，在一个界面内无法直接显示完毕，需要使用上下滑屏来显示数据。 层级结构： Image + ScrollRect + Mask [背景图片，滑动组件，区域遮罩] |—Grid Layout Group [表格布局组件] |—Item [N 个同级别的子物体] 操作步骤，在案例一的基础上： 第一步:在BG上加入Mask组件，起到遮罩的作用，再加入ScrollRect 组件，取消勾选Horizontal是问了不让它左右滑动，再将EMPTY拖入到ScrollRect 的Comtent中。 [](http://www.wjgbaby.com/wp-content/uploads/2017/11/17112812.png) 第二步:再EMPTY中加入Content Size Fitter组件，进行内容尺寸的过滤，并设置Vertical Fit为Preferred Size。 [](http://www.wjgbaby.com/wp-content/uploads/2017/11/17112813.png) 最终效果就是下面的动态图： [](http://www.wjgbaby.com/wp-content/uploads/2017/11/17112814.gif)