Configuración de cuadrícula y tabla | Documentación del Centro de creación de Roblox

En comparación con UIListLayout , UIGridLayout y UITableLayout , se permiten diseños más estructurados y organizados. Estos son más adecuados para interfaces como un inventario de tienda donde cada artículo se puede presentar en una cuadrícula de iguales tamaños de fichas, o los elementos se pueden ordenar en relaciones relacionadas.

Diseño de la cuadrícula

UIGridLayout posiciones hermanas GuiObjects en una cuadrícula de unidades uniformes del mismo tamaño dentro de su contenedor padre. Las unidades se agregan por fila o columna según el diseño de la cel

Por defecto, UIGridLayout posiciones hermanas GuiObjects en orden de sus LayoutOrder donde los valores inferiores van antes que los valores superiores, y los valores iguales sortean dependiendo

Una vez que ingrese un <a href="/reference/engine/datums"> Class.UIGridLayout </a>, se anula o afecta el <a href="/reference/engine/datums"> Class.GuiObject.Position|Position</a> y/o <a href="/reference/engine/datums"> Class.GuiObject.Size|Size</a> de todos los objetos de la interfaz de usuario hermana, por lo que los cambios en estas propiedades dentro de la ventana <a href="https://www

UIGridLayout respeta cualquier restricción que coloque en los objetos dentro de la cuadrícula. Por ejemplo, si un objeto tiene un UISizeConstraint con una propiedad de 0> Class.UISizeConstraint.MinSize|MinSize 0> que es mayor que la propiedad de la cuadr

Diseño de la mesa

UITableLayout posiciones hermanas GuiObjects y sus hijos en formato de tabla. El formato de datos predeterminado de Class.UITableLayout.FillDirection|FillDirection de Enum.FillDirection significa que los hermanos están primero posicionados en filas, y los hijos de esos

Este patrón imita la estructura de la fila/columna estándar de 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>

A menos que habilites las propiedades de FillEmptySpaceColumns o FillEmptySpaceRows de tama

Una vez que ingrese un <a href="/reference/engine/datums"> Class.UITableLayout </a>, se anula o afecta el <a href="/reference/engine/datums"> Class.GuiObject.Position|Position</a> y/o <a href="/reference/engine/datums"> Class.GuiObject.Size|Size</a> de todos los objetos de interfaz de usuario hermanos, por lo que los cambios en estas propiedades dentro de la ventana <a href="https://www.

UITableLayout respeta y es responsable de cualquier UISizeConstraint que coloque en los objetos dentro de la tabla. Por ejemplo, si un objeto tiene un UISizeConstraint con una propiedad 0> Class.UISizeConstraint.MinSize|MinSize0> dentro de una celda de encabezado

Nota que si la propiedad MaxSize restringe el tamaño de una celda al llenar el espacio asignado de una fila o columna que es más ancha que la celda, el objeto se alineará con el top-left de la celda.