# Layouts

> Os seis layouts, add(LAY_AUTO/LAY_FILL/fração) e a técnica de aninhar layouts para telas reais.

Source: https://crossfly.dev/pt/docs/learn/layouts — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# 4. Layouts

> **O que você vai aprender:** como o CrossFly posiciona, e a técnica de **aninhar layouts** para montar
> telas reais. **Pré-requisitos:** [Pensando em componentes](/docs/learn/thinking-in-components).

## Exemplo completo (copiar, colar e rodar)
A estrutura definitiva da tela de lista, **aninhando layouts**: header em `HorizontalLayout` (altura
auto), conteúdo elástico com `LAY_FILL` e rodapé auto — tudo num `VerticalLayout`. Compila como está.
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout(Position.START, Position.START));

      // header: HorizontalLayout, altura natural (LAY_AUTO)
      Component header = new Component();
      header.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
      header.add(LAY_AUTO, new Button(new MaterialIcon("")));   // ícone
      header.add(LAY_FILL, new Label("Minhas tarefas"));         // título absorve a largura
      add(LAY_AUTO, header);

      // conteúdo: o "elástico" — absorve a altura restante
      Component conteudo = new Component();
      conteudo.setLayout(new VerticalLayout());
      conteudo.add(LAY_AUTO, new Label("Item 1"));
      conteudo.add(LAY_AUTO, new Label("Item 2"));
      conteudo.add(LAY_AUTO, new Label("Item 3"));
      add(LAY_FILL, conteudo);

      // rodapé: altura natural
      add(LAY_AUTO, new Button("Adicionar"));
   }
}
```
> Os trechos abaixo mostram **só o miolo** (o que vai dentro de `onShow()`). Para rodar, coloque-os no esqueleto `MainWindow` acima.

## Os seis layouts
| Layout | Para |
|---|---|
| `VerticalLayout` / `HorizontalLayout` | empilhar ↓ / lado a lado → |
| `GridLayout` | grade por fração (larguras, depois componentes) |
| `RelativeLayout` | ancorar um componente a outro |
| `EvenlySpacedLayout` | espaçar igualmente |
| `RandomLayout` | posição livre (overlays) |

## `add(tamanho, comp)` — os três casos
```java
add(LAY_AUTO, comp);   //  0f → tamanho natural do conteúdo
add(LAY_FILL, comp);   // -1f → preenche o espaço restante (o "elástico")
add(0.3f, comp);       // >0  → 30% da dimensão do container
```

## A técnica-chave: aninhar layouts
Telas reais se montam **compondo** containers com layouts diferentes. Header em `HorizontalLayout`
(auto), conteúdo em `LAY_FILL`, tudo num `VerticalLayout`:
```java
setLayout(new VerticalLayout(Position.START, Position.START));

Component header = new Component();
header.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
header.add(LAY_AUTO, new Button(new MaterialIcon("")));   // ícone
header.add(LAY_FILL, new Label("Minhas tarefas"));         // título absorve a largura
add(LAY_AUTO, header);                                      // header: altura natural

add(LAY_FILL, new VirtualListView(Relative.ofFont(3f), adapter));   // lista: absorve a altura
```

## Constrói neste passo
A **estrutura definitiva** da tela de lista: **header** (auto) + **lista** (`LAY_FILL`) + rodapé.

## Recapitulando
`add(0f|-1f|fração, comp)`; um `LAY_FILL` por eixo é o elástico; **aninhe layouts** para telas reais.

## Próximos passos
→ [Estilos e temas](/docs/learn/styling-and-themes)

## Veja também
- [Layouts (ui)](/docs/ui/layouts) · Conceito: [Layout e o modelo Relative](/docs/concepts/the-layout-and-relative-model)