網格和表格佈局

*此內容是使用 AI（Beta 測試版）翻譯，可能含有錯誤。若要以英文檢視此頁面，請按一下這裡。

與 UIListLayout 相比，UIGridLayout 和 UITableLayout 允許更具結構性和組織性的佈局。這些佈局最適合用於像商店庫存這樣的界面，其中每個項目可以在一個等大小的瓷磚網格中顯示，或者項目可以根據相關的行/列進行排序。

網格佈局

UIGridLayout 將兄弟 GuiObjects 以均勻大小的格子佈置在其父容器中。根據佈局的 FillDirection 按行或按列添加格子，直到下一個格子不適合為止，然後開始新行或新列。為了進一步控制，您可以使用 FillDirectionMaxCells 屬性來設置每行或每列的最大格子數。

默認情況下，UIGridLayout 會按照其 LayoutOrder 的順序為兄弟 GuiObjects 進行佈置，其中較低的值將排在較高的值之前，且相等的值根據添加的順序進行排序。如果您將佈局的 SortOrder 更改為 Enum.SortOrder.Name，則兄弟將按字母順序排序。

一旦插入了 UIGridLayout，它會覆蓋或影響所有兄弟 UI 對象的 Position 和/或 Size，因此在 Properties 視窗或腳本中對這些屬性的更改將不會產生正常效果。

UIGridLayout 尊重您對網格內對象施加的任何 constraints。例如，如果一個對象具有 UISizeConstraint，其 MinSize 屬性高於網格的 CellSize 屬性，則該對象將跨越多個格子。

表格佈局

UITableLayout 將兄弟 GuiObjects 及其子元素佈置成表格格式。默認的 FillDirection 為 Vertical，這意味著兄弟首先按行佈置，然後將這些兄弟的子元素水平佈置以形成列，從而使每個行內的格子具有相同的高度，而每個列內的格子具有相同的寬度。

該模式模擬標準的 HTML 行/列結構：


<table>
	<tbody>
		<tr>
		<!-- Row1 -->
			<td>標籤 1</td> <!-- TextLabel1 -->
			<td>標籤 2</td> <!-- TextLabel2 -->
			<td>標籤 3</td> <!-- TextLabel3 -->
		</tr>
		<tr>
		<!-- Row2 -->
			<td>標籤 4</td> <!-- TextLabel4 -->
			<td>標籤 5</td> <!-- TextLabel5 -->
			<td>標籤 6</td> <!-- TextLabel6 -->
		</tr>
		<tr>
		<!-- Row3 -->
			<td>標籤 7</td> <!-- TextLabel7 -->
			<td>標籤 8</td> <!-- TextLabel8 -->
			<td>標籤 9</td> <!-- TextLabel9 -->
		</tr>
	</tbody>
</table>

除非您啟用佈局的 FillEmptySpaceColumns 或 FillEmptySpaceRows 屬性，否則兄弟 GuiObjects 的大小將決定格子的尺寸。例如，大小為 UDim2.new(0.25, 0, 0.1, 0) 的 TextLabel 將在父容器中創建一個 25% 寬和 10% 高的表格格子。

一旦插入了 UITableLayout，它會覆蓋或影響所有兄弟 UI 對象的 Position 和/或 Size，因此在 Properties 視窗或腳本中對這些屬性的更改將不會產生正常效果。

UITableLayout 尊重並響應您在表格內對對象施加的任何 UISizeConstraint。例如，如果一個對象在標題格子內具有 UISizeConstraint 及其 MinSize 屬性，則該列內其餘的格子將與標題格子具有相同的大小。

請注意，如果 MaxSize 屬性限制格子的大小，未能填滿比格子寬的行或列的分配空間，則該對象將對齊格子的左上角。

中文(繁體)