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相似。