El UIListLayout posiciona objetos hermanos GuiObjects en filas horizontales o columnas verticales dentro de su contenedor padre. Cada vez que añades o eliminas un objeto hermano, el diseño se ajusta en consecuencia.
Una vez que insertas un UIListLayout, éste anula o influye en la Position, Rotation y/o Size de todos los objetos de interfaz de usuario hermanos, por lo que los cambios a esas propiedades dentro de la ventana de Propiedades o dentro de un script no tendrán el efecto normal.
Dirección de llenado
La propiedad FillDirection determina la dirección en la que se renderizarán los hermanos del diseño de lista.
El orden se determina mediante la propiedad SortOrder del diseño, que puede ser ascendente numérico, basado en el valor entero LayoutOrder de cada elemento, o alfanumérico basado en el Name del elemento.
Para revertir elementos, como el orden de derecha a izquierda en una lista horizontal, necesitarás invertir la clasificación. Por ejemplo, si cuatro elementos están ordenados por LayoutOrder de 0, 1, 2, 3 respectivamente, nega cada valor para formar un orden de 0, -1, -2, -3.
Alineación
Las propiedades HorizontalAlignment y VerticalAlignment determinan la alineación respectiva X y Y de los hermanos de la lista en relación entre sí y los límites generales de la lista dentro de su contenedor. Por ejemplo, una lista llenada horizontalmente con una VerticalAlignment de Center alinea centralmente a los hermanos de la lista entre sí y centra la lista verticalmente en su contenedor.
HorizontalAlignment y VerticalAlignment difieren ligeramente de la alineación de línea de elementos en un diseño de flexibilidad, con el que puedes alinear elementos en la misma línea sin aplicar la misma alineación a los límites generales de la lista en su contenedor.
Envueltura
La propiedad Wraps controla si los hermanos dentro del contenedor padre se envuelven a otra línea cuando su tamaño predeterminado excede el ancho/alto de los límites del contenedor.
Relleno
La propiedad Padding determina la cantidad de espacio vacío entre cada elemento de la lista, establecido ya sea como una escala (porcentaje del tamaño del contenedor en la dirección actual) o un desplazamiento (valor de espaciamiento estático similar al tamaño de píxeles).
Esta propiedad no aplica el relleno alrededor de los límites generales de la lista; consulta UIPadding para aplicar relleno superior, inferior, izquierdo y/o derecho al contenido del padre.
Diseños de flexibilidad
Integrar flexibilidad en un UIListLayout es una forma poderosa de llenar/distribuir equitativamente o alinear/estirar elementos de la lista a través de su línea, o flexibilizar elementos específicos a través de un espacio variable.
Si bien la flexibilidad es una herramienta poderosa, no debes aplicarla a un UIListLayout sin propósito, ya que añade un ligero costo de rendimiento en comparación con el diseño no flexible, especialmente al redimensionar el diseño o agregar/eliminar elementos de flexibilidad dinámicamente.
Además, un diseño de cuadrícula puede ser preferible cuando los elementos deben alinearse estrictamente a una cuadrícula en ambas direcciones X e Y, ya que los diseños de cuadrícula imponen un tamaño de celda consistente mientras que los diseños de flexibilidad pueden usar un número variable de elementos por línea.
Llenado o distribución igual
Cuando la dirección de llenado del diseño de lista está configurada en Horizontal, la propiedad HorizontalFlex especifica cómo distribuir el espacio horizontal adicional en el contenedor padre. De manera similar, cuando la dirección de llenado está configurada en Vertical, la propiedad VerticalFlex especifica cómo distribuir el espacio vertical adicional.
Un uso práctico de HorizontalFlex es una interfaz de ventana con pestañas donde la flexibilidad llena la barra de pestañas de manera equitativa, sin importar la cantidad de pestañas. No hay un enfoque más fácil que la flexibilidad en este caso, porque calcula automáticamente el ancho de cada pestaña sin configuraciones de ancho definidas por el desarrollador, y se ajusta automáticamente si cambia la cantidad de pestañas.
Alineación de línea de elementos
La propiedad ItemLineAlignment define la alineación en la dirección cruzada de los hermanos dentro de una línea, permitiéndote alinear objetos de diferentes anchos/alturas o hacer que objetos de menor ancho/alto llenen toda su línea.
Un caso de uso práctico para ItemLineAlignment es estirar una serie de baldosas de tamaño inconsistente para que llenen toda su fila (Stretch), haciendo que el diseño sea más cohesivo.
Flexibilizar elementos individuales
Si bien flexibilizar un diseño completo es una utilidad poderosa, ciertos diseños son más adecuados para flexibilizar elementos individuales. En tales diseños, algunos elementos en la lista mantienen su tamaño básico mientras que otros elementos se flexibilizan para llenar espacios variables. Un uso práctico es un widget de barra deslizante con etiquetas uniformes labels en ambos extremos y una barra deslizante flexible que llena todo el ancho entre.
Para establecer un elemento de lista específico como flexible, inserta un UIFlexItem como hijo del elemento flexible, luego establece su propiedad FlexMode en Fill, Grow, Shrink o Custom.
