Contêineres de layout

O Jetpack Compose oferece vários contêineres de layout para ajudar você a estruturar e organizar os componentes da interface. Embora os elementos de composição de layout fundamentais, como Row e Column, lidem com arranjos simples, muitos apps exigem soluções de contêiner mais responsivas e adaptáveis à medida que os tamanhos de tela mudam e os dados do usuário aumentam.

Os contêineres de layout incluem:

• Listas e grades lentas: componentes como LazyColumn, LazyRow e LazyVerticalGrid que mostram com eficiência conjuntos de dados grandes ou de tamanho dinâmico, compondo e organizando apenas os itens visíveis na janela de visualização.
• Pager: contêineres como HorizontalPager e VerticalPager que permitem que os usuários deslizem ou rolem entre páginas de conteúdo.
• Layouts de fluxo: contêineres unidimensionais responsivos (FlowRow e FlowColumn) que agrupam automaticamente os itens excedentes na próxima linha ou coluna quando o espaço acaba.
• Grade: uma estrutura flexível e bidimensional que mostra itens em layouts de várias colunas ou linhas que se adaptam ao tamanho do contêiner.
• FlexBox: um contêiner adaptável inspirado no Flexbox do CSS que oferece controle granular sobre como os itens são agrupados, aumentam, diminuem e se alinham ao longo dos eixos principal e transversal para preencher o espaço disponível.

Escolher o contêiner de layout correto

Ao criar layouts no Compose, a escolha entre contêineres de layout básicos e mais avançados depende do design, se os itens precisam ser agrupados quando o espaço é limitado e como eles são redimensionados dinamicamente.

A tabela a seguir resume os recursos de cada um dos contêineres de layout unidimensionais do Compose:

Contêiner	Envolve itens em novas linhas	Crescimento por item	Encolhimento por item	Tamanho inicial por item	Os itens aumentam para preencher o espaço disponível em várias linhas	Reorganizar itens	Carregamento lento	Ideal para:
Linha / coluna	❌	✅ (via weight) somente linha única	❌	❌	❌	❌	❌	Linhas uniformes com um número pequeno e fixo de itens. Os itens se encaixam nos limites disponíveis e não precisam ser divididos em várias linhas.
FlowRow / FlowColumn	✅	Limitado	❌	❌	Parcial	❌	❌	Substituída por FlexBox.
LazyRow / LazyColumn	❌	❌	❌	❌	❌	❌	✅	Listas longas ou infinitas de itens em que apenas os itens visíveis precisam ser renderizados para otimização de desempenho. Conjuntos de dados dinâmicos ou grandes que rolam em uma única direção.
FlexBox	✅	✅	✅	✅	✅	✅	❌	Layouts que exigem recursos adaptativos, como especificar o tamanho inicial, aumentar/diminuir itens dinamicamente (grow/shrink), reordenar visualmente (order) ou alinhar itens no eixo transversal (alignSelf). Organização de itens de tamanhos variados.

A tabela abaixo resume os recursos de Grid e outros elementos combináveis semelhantes:

Contêiner	Alinhamento 2D rigoroso	Abrangência de itens (colunas)	Item spanning (rows)	Carregamento lento	Ideal para:
Grade	✅	✅ (via GridArea)	✅	❌	Layouts estruturais bidimensionais em que todos os itens estão na tela e precisam de alinhamento horizontal e vertical explícito. Reestruturar layouts de forma adaptável em diferentes tamanhos de tela.
LazyVerticalGrid	✅	✅ (via span)	❌	✅	Feeds de rolagem vertical e catálogos grandes que exigem colunas.
LazyStaggeredGrid	❌ (somente 1D)	Parcial (somente período completo)	❌	✅	Feeds de rolagem com itens de alturas diferentes.
LazyHorizontalGrid	✅	❌	✅	✅	Carrosséis de rolagem horizontal ou dados paginados em várias linhas.
Como combinar linhas e colunas	❌	❌	❌	❌	Montagem simples de componentes, como colocar um rótulo de texto ao lado de um ícone.