تخطيطات الشبكة والجداول

بالمقارنة مع UIListLayout، تتيح UIGridLayout و UITableLayout تخطيطات أكثر تنظيمًا وهيكلة. هذه هي الأنسب لواجهات مثل مخزون المتجر حيث يمكن عرض كل عنصر في شبكة من البلاط المتساوي الحجم، أو يمكن فرز العناصر في صفوف/أعمدة متعلقة.

تخطيط الشبكة

تقوم UIGridLayout بترتيب الأشقاء GuiObjects في شبكة من الخلايا المتجانسة بنفس الحجم داخل الحاوية الأم. تتم إضافة الخلايا بالصف أو العمود بناءً على FillDirection حتى لا تتناسب الخلية التالية، ثم يبدأ صف أو عمود جديد. للتحكم الإضافي، يمكنك استخدام خاصية FillDirectionMaxCells لتحديد العدد الأقصى من الخلايا لكل صف أو عمود.

بافتراض الوضع الافتراضي، تقوم UIGridLayout بترتيب الأشقاء GuiObjects بترتيب LayoutOrder حيث تذهب القيم الأقل قبل القيم الأعلى، ويتم فرز القيم المتساوية بناءً على الترتيب الذي تم إضافتها به. إذا قمت بتغيير SortOrder للتخطيط إلى Enum.SortOrder.Name، سيتم فرز الأشقاء ترتيبًا أبجديًا.

تخطيط الجدول

تقوم 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 يحدد أبعاد الخلايا. على سبيل المثال، سيؤدي TextLabel بحجم UDim2.new(0.25, 0, 0.1, 0) إلى إنشاء خلية جدول بعرض 25% وارتفاع 10% داخل الحاوية الأم.