Bố trí lưới và bảng

*Nội dung này được dịch bằng AI (Beta) và có thể có lỗi. Để xem trang này bằng tiếng Anh, hãy nhấp vào đây.

So với UIListLayout , UIGridLayout và UITableLayout cho phép có nhiều bố trí có cấu trúc và tổ chức hơn.Chúng phù hợp nhất với các giao diện như kho hàng nơi mỗi mặt hàng có thể được trình bày trong một lưới các ô có kích thước tương tự, hoặc các mặt hàng có thể được sắp xếp thành các hàng/cột liên quan.

UIGridLayout
UITableLayout

Bố trí lưới

UIGridLayout vị trí anh em GuiObjects trong một lưới các tế bào đồng kích thước trong cùng một thùng chứa cha của chúng.Các ô được thêm bởi hàng hoặc cột dựa trên bố trí FillDirection cho đến khi ô tiếp theo không phù hợp, sau đó một hàng hoặc cột mới bắt đầu.Để kiểm soát tiếp theo, bạn có thể sử dụng thuộc tính FillDirectionMaxCells để đặt số tế bào tối đa trong mỗi hàng hoặc cột.

Mặc định, vị trí anh em theo thứ tự của các giá trị thấp hơn, và các giá trị bằng nhau sắp xếp tùy thứ tự mà bạn đã thêm chúng.Nếu bạn thay đổi bố trí của SortOrder thành Enum.SortOrder.Name , các anh em sẽ được sắp xếp theo thứ tự bảng chữ cái.

Bố trí bảng

UITableLayout vị trí anh em GuiObjects và con của họ vào định dạng bảng.Mặc định FillDirection của Vertical có nghĩa là các em họ được xếp hàng đầu vào các hàng, và con cái của các em họ được xếp hàng ngang để tạo thành các cột, như vậy mỗi ô trong một hàng có cùng chiều cao và mỗi ô trong một cột có cùng chiều rộng.

Mẫu này bắt chước cấu trúc hàng/cột HTML tiêu chuẩn:

<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>

Trừ khi bạn bật các thuộc tính FillEmptySpaceColumns hoặc FillEmptySpaceRows của bố trí, kích thước của anh em GuiObjects xác định kích thước của các tế bào.Ví dụ, một TextLabel có kích thước UDim2.new(0.25, 0, 0.1, 0) sẽ tạo một ô bảng có chiều rộng 25% và chiều cao 10% bên trong thùng chứa cha.