一、在控件藍圖中拖入GridPanel控件，設置該控件的位置，及大小。

二、在Grid Panel中拖入五個button控件，剛拖入的button在Grid Panel中默認位置為左上角，

三、選中具體的按鈕button控件，設置各自的Row和Column，也可以點擊問號將button移動

現象：如果將最后一個按鈕繼續設置行和列，上圖中的行和列都為4，下圖中的行和列均為7，卻發現位置是一樣的，

這是因為，默認情況下，每個格子的填充格式為Auto（有多小就選擇多小區域顯示），因為4，5，6行列中并沒有控件，所以他們的最小區域為0，因此直接顯示7,7位置上的控件元素。

四、設置Grid Panel設置每個單元格內的控件是否是拉伸比重

1.選中Grid Panel，在細節面板選擇Fill Rules 選項，可以看到Column Fill 和Row Fill，分別對應第幾列和第幾行的拉伸參數，0為Auto

2.設置行拉伸參數為1。

3.將行填充也改為1

4.如果更改Grid Panel的大小，Crid Panel內的元素大小也會跟隨更改。

注意：1.拉伸比重是Grid Panel自身的屬性設置，而不是Uniform Panel一樣在子控件中設置。

2.設置的行和列拉伸系數 設置的是一行或一列的拉伸，而不是固定某一個。

五、設置Grid Panel內子控件Slot參數

1.選擇其中一個Button，細節面板設置Grid Slot

?1、Padding：留白

2、Horizontal Alignment：橫向對齊、Vertical Alignment：垂直對齊

3、Row：在Grid Panel中占據的行索引

4、Row Span：跨行

5、Column：在Grid Panel中占據的列索引

6、Column Span：跨列

6、Layer：2個控件在相同的單元格就可以設置Layer來調整前后顯示順序

7、Nudget.X、Nudget.Y，偏移量，跟Render Transform中Transform作用相同。

Row Span及Column Span 設置的是單個控件的自身的大小，不影響其他的格子內控件

示例：將第一個控件跨行跨列設置為2,其他不變。

Layer：默認均為0，下圖中，Layer為0，值越小就會被值大的覆蓋，

在控件排列順序中，默認排列順序往下的 覆蓋上面的。所以將在Layer值一樣時，會有下圖效果。Layer值大的覆蓋小的。如果設置完成后發現并沒有效果，編譯之后就會有。

總結

以上是生活随笔為你收集整理的UE4-（UI）第六十四课Grid Panel的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。