เค้าโครงตารางและตาราง

*เนื้อหานี้แปลโดยใช้ AI (เวอร์ชัน Beta) และอาจมีข้อผิดพลาด หากต้องการดูหน้านี้เป็นภาษาอังกฤษ ให้คลิกที่นี่

เมื่อเทียบกับ UIListLayout , UIGridLayout และ UITableLayout ช่วยให้มีการจัดเตรียมและจัดรูปแบบที่มีโครงสร้างมากขึ้นเหมาะสมที่สุดสำหรับอินเทอร์เฟซเช่นร้านค้าสินค้าที่แต่ละรายการสามารถนำเสนอในกริดขนาดเท่ากันหรือรายการสามารถจัดเรียงตามแถว/คอลัมน์ที่เกี่ยวข้อง

UIGridLayout
UITableLayout

เลย์เอาต์กริด

ตําแหน่งพี่น้องในกริดเซลเดียวกันขนาดเดียวภายในคอนเทนเนอร์พ่อแม่ของพวกเขาเซลล์จะถูกเพิ่มโดยแถวหรือคอลัมน์ตามลายวาง FillDirection จนกว่าเซลล์ถัดไปจะไม่พอดี จากนั้นแถวหรือคอลัมน์ใหม่จะเริ่มขึ้นสำหรับการควบคุมเพิ่มเติม คุณสามารถใช้คุณสมบัติ FillDirectionMaxCells เพื่อตั้งจํานวนเซลล์สูงสุดต่อแถวหรือคอลัมน์

โดยค่าเริ่มต้น, ตําแหน่งพี่น้อง ในลําดับที่มีค่าต่ํากว่าไปก่อนค่าสูงกว่า, และจัดเรียงตามลําดับที่คุณเพิ่มพวกเขาไปก่อน ขึ้นอยู่กับลําดับที่คุณเพิ่มพวกเขาหากคุณเปลี่ยนเลย์เอาต์ SortOrder เป็น Enum.SortOrder.Name พี่น้องจะจัดเรียงตามลำดับตัวอักษร

เลย์เอาต์ตาราง

UITableLayout ตําแหน่งพี่น้อง GuiObjects และบุตรหลานของพวกเขาในรูปแบบตารางค่าเริ่มต้นของ FillDirection ของ Vertical หมายความว่าพี่น้องจะถูกจัดตำแหน่งเป็นแถวแรกและบุตรหลานของพี่น้องจะถูกจัดตำแหน่งแนวนอนเพื่อสร้างเส้นแนวตั้ง ดังนั้นแต่ละเซลล์ภายในแถวจะมีความสูงเท่ากันและแต่ละเซลล์ภายในคอลัมน์จะมีความกว้างเท่ากัน

รูปแบบนี้จำลองโครงสร้างแถว/คอลัมน์ 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>

ยกเว้นที่คุณเปิดใช้งานคุณสมบัติของเลย์เอาต์ FillEmptySpaceColumns หรือ FillEmptySpaceRows คุณสมบัติของพี่น้อง GuiObjects ขนาดของเซลล์จะกำหนดขนาดของเซลล์ตัวอย่างเช่น TextLabel ขนาด UDim2.new(0.25, 0, 0.1, 0) จะสร้างเซลล์ตารางขนาด 25% และความสูง 10% ภายในคอนเทนเนอร์ราก