Contenedores de diseño

Jetpack Compose proporciona varios contenedores de diseño para ayudarte a estructurar y organizar los componentes de la IU. Si bien los elementos de diseño componibles fundamentales, como Row y Column, controlan disposiciones sencillas, muchas apps requieren soluciones de contenedores más responsivas y adaptables a medida que cambian los tamaños de pantalla y aumentan los datos de los usuarios.

Los contenedores de diseño incluyen lo siguiente:

• Listas y cuadrículas diferidas: Son componentes como LazyColumn, LazyRow y LazyVerticalGrid que muestran de manera eficiente conjuntos de datos grandes o de tamaño dinámico, ya que solo componen y disponen los elementos visibles en el viewport.
• Pager: Son contenedores como HorizontalPager y VerticalPager que permiten que los usuarios se deslicen o se desplacen entre páginas de contenido.
• Diseños de flujo: Son contenedores unidimensionales responsivos (FlowRow y FlowColumn) que ajustan automáticamente los elementos que se desbordan a la siguiente fila o columna cuando se agota el espacio.
• Cuadrícula: Es una estructura flexible y bidimensional que muestra elementos en diseños de varias columnas o filas que se adaptan al tamaño del contenedor.
• FlexBox: Es un contenedor adaptable inspirado en CSS Flexbox que proporciona un control detallado sobre cómo los elementos se ajustan, crecen, se reducen y se alinean a lo largo de los ejes principal y cruzado para llenar el espacio disponible.

Elige el contenedor de diseño correcto

Cuando creas diseños en Compose, la elección entre contenedores de diseño básicos y más avanzados depende de tu diseño, de si los elementos deben ajustarse cuando el espacio es limitado y de cómo cambian de tamaño de forma dinámica.

En la siguiente tabla, se resumen las capacidades de cada uno de los contenedores de diseño 1D de Compose:

Contenedor	Ajusta los elementos a líneas nuevas	Crecimiento por elemento	Reducción por elemento	Tamaño inicial por elemento	Los elementos se expanden para llenar el espacio disponible en varias líneas	Cómo reordenar elementos	Carga diferida	Ideal para:
Fila / columna	❌	✅ (a través de weight) solo una línea	❌	❌	❌	❌	❌	Filas uniformes con una cantidad pequeña y fija de elementos. Los elementos se ajustan a los límites disponibles y no es necesario que se ajusten a varias líneas.
FlowRow / FlowColumn	✅	Limitado	❌	❌	Parcial	❌	❌	Reemplazada por FlexBox.
LazyRow / LazyColumn	❌	❌	❌	❌	❌	❌	✅	Listas largas o infinitas de elementos en las que solo se deben renderizar los elementos visibles para optimizar el rendimiento Conjuntos de datos dinámicos o grandes que se desplazan en una sola dirección.
FlexBox	✅	✅	✅	✅	✅	✅	❌	Diseños que requieren capacidades adaptables, como especificar el tamaño inicial, el crecimiento o la reducción dinámicos de los elementos (grow/shrink), el reordenamiento visual (order) o la alineación de ejes cruzados a nivel del elemento (alignSelf). Organizar elementos de diferentes tamaños

En la siguiente tabla, se resumen las capacidades de Grid y otros elementos componibles similares:

Contenedor	Alineación estricta en 2D	Abarcar elementos (columnas)	Abarcar elementos (filas)	Carga diferida	Ideal para:
Cuadrícula	✅	✅ (mediante GridArea)	✅	❌	Diseños estructurales bidimensionales en los que todos los elementos están en pantalla y necesitan una alineación horizontal y vertical explícita. Reestructurar los diseños de forma adaptable en todos los tamaños de pantalla
LazyVerticalGrid	✅	✅ (mediante span)	❌	✅	Feeds de desplazamiento vertical y catálogos grandes que requieren columnas
LazyStaggeredGrid	❌ (solo 1D)	Parcial (solo para el intervalo completo)	❌	✅	Feeds de desplazamiento con elementos de altura mixta
LazyHorizontalGrid	✅	❌	✅	✅	Carruseles de desplazamiento horizontal o datos paginados de varias filas
Cómo combinar filas y columnas	❌	❌	❌	❌	Ensamblaje de componentes simples, como colocar una etiqueta de texto junto a un ícono