Układy siatki i tabeli

*Ta zawartość została przetłumaczona przy użyciu narzędzi AI (w wersji beta) i może zawierać błędy. Aby wyświetlić tę stronę w języku angielskim, kliknij tutaj.

W porównaniu do UIListLayout , UIGridLayout i UITableLayout pozwalają na bardziej zorganizowane i zstrukturyzowane układy.Są one najbardziej odpowiednie dla interfejsów takich jak ekwipunek sklepu, gdzie każdy przedmiot może być przedstawiony na siatce równych płytek lub przedmioty można sortować do odpowiednich wierszy/kolumn.

UIGridLayout
UITableLayout

Układ siatki

UIGridLayout pozycje siostry GuiObjects na siatce jednolitych komórek o tej samej wielkości w ramach ich pojemnika rodzica.Komórki są dodawane wierszem lub kolumną w oparciu o układ FillDirection, aż następna komórka nie zmieści się, a następnie zaczyna się nowy wiersz lub kolumna.Aby uzyskać dalszą kontrolę, możesz użyć właściwości FillDirectionMaxCells, aby ustawić maksymalną liczbę komórek na rzędzie lub kolumnie.

Domyślnie pozycje UIGridLayout brata GuiObjects w kolejności ich LayoutOrder gdzie niższe wartości idą przed wyższymi wartościami, a równe wartości sortują się w zależności od kolejności, w której je dodałeś.Jeśli zmienisz układ SortOrder do Enum.SortOrder.Name, siostry sortują się w kolejności alfabetycznej.

Układ tabeli

UITableLayout pozycje rodzeństwa GuiObjects i ich dzieci w formacie tabeli.Domyślny FillDirection z Vertical oznacza, że bracia są najpierw umieszczani w rzędach, a dzieci tych braci są umieszczane pionowo, aby utworzyć kolumny, tak że każda komórka w rzędzie ma tę samą wysokość i każda komórka w kolumnie ma tę samą szerokość.

Ten wzór naśladuje standardową strukturę wiersza/kolumny HTML:

<table>

	<tbody>

		<tr>

		<!-- Row1 -->

			<td>Label 1</td> <!-- TextLabel1 -->

			<td>Label 2</td> <!-- TextLabel2 -->

			<td>Label 3</td> <!-- TextLabel3 -->

		</tr>

		<tr>

		<!-- Row2 -->

			<td>Label 4</td> <!-- TextLabel4 -->

			<td>Label 5</td> <!-- TextLabel5 -->

			<td>Label 6</td> <!-- TextLabel6 -->

		</tr>

		<tr>

		<!-- Row3 -->

			<td>Label 7</td> <!-- TextLabel7 -->

			<td>Label 8</td> <!-- TextLabel8 -->

			<td>Label 9</td> <!-- TextLabel9 -->

		</tr>

	</tbody>

</table>

Chyba że włączysz właściwości układu FillEmptySpaceColumns lub FillEmptySpaceRows, rozmiar brata GuiObjects określa wymiary komórek.Na przykład, TextLabel o rozmiarze UDim2.new(0.25, 0, 0.1, 0) stworzy komórkę tablicy o szerokości 25% i wysokości 10% w ramach pojemnika rodzica.