列表控件Horizontal/Vertical/Grid Layout Group使用说明
列表控件Horizontal/Vertical/Grid Layout Group使用说明
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与此类似,只不过限定的是行数:
效果为:
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使用:
Vertical Layout Group
与Horizontal Layout Group类似。