# VerticalLayout

> Apila los hijos de arriba hacia abajo, cada uno al ancho del contenedor.

Source: https://crossfly.dev/es/docs/ui/layouts/vertical-layout — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# VerticalLayout

Apila los componentes hijos **de arriba hacia abajo** (una fila por hijo), cada uno ocupando el
**ancho del contenedor** (menos el margen). Es el layout más usado — la columna vertebral de la mayoría de las pantallas.

> 🟢 · **Paquete:** `dev.crossfly.ui.layout` · **Extiende:** `Layout`

## Cuándo usar
- Pantallas en columna: encabezado + contenido + pie.
- Cualquier lista de secciones apiladas.

## Cuándo NO usar
- Elementos lado a lado → [HorizontalLayout](/docs/ui/layouts/horizontal-layout).
- Cuadrícula etiqueta/campo → [GridLayout](/docs/ui/layouts/grid-layout).

## `add(...)` — firma y semántica
```java
public VerticalLayout add(float altura, Component c)
```
El parámetro **`altura`** controla la fila:

| Valor | Significado |
|---|---|
| `LAY_AUTO` (`0f`) | **altura natural** del componente (`getAutoHeight()`) — escala con la fuente |
| `LAY_FILL` (`-1f`) | **rellena el sobrante** (usa **una** fila FILL por layout) |
| `> 0` (ex. `0.25f`) | **fracción de la altura del contenedor** (25%) — no son píxeles |

## Constructores
| Constructor | Descripción |
|---|---|
| `new VerticalLayout()` | alineación horizontal **centrada** de cada fila |
| `new VerticalLayout(Position h, Position v)` | `h` = alineación horizontal de las filas (`START`/`CENTER`/`END`) |

## Ejemplo completo (copiar, pegar y ejecutar)
```java
package com.exemplo;

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

/** Pantalla principal ejecutable. Apunta el launcher (classname) y corre: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();

      setLayout(new VerticalLayout(Position.START, Position.START));

      Component lista = new Component();          // contenido elástico (placeholder)
      lista.setLayout(new VerticalLayout(Position.START, Position.START));
      for (int i = 1; i <= 5; i++)
         lista.add(LAY_AUTO, new Label("Produto " + i));

      add(LAY_AUTO, new Label("Produtos"));   // cabecera — altura natural
      add(LAY_FILL, lista);                    // contenido — absorbe todo el sobrante
      add(LAY_AUTO, new Button("Adicionar"));  // pie — altura natural
   }
}
```

> Los fragmentos siguientes muestran **solo el núcleo** (lo que va dentro de `onShow()`). Para ejecutar, colócalos en el esqueleto `MainWindow` anterior.

## Uso básico
```java
setLayout(new VerticalLayout(Position.START, Position.START));
add(LAY_AUTO, new Label("Produtos"));   // cabecera — altura natural
add(LAY_FILL, lista);                    // contenido — absorbe todo el sobrante
add(LAY_AUTO, new Button("Adicionar"));  // pie — altura natural
```

## Cómo distribuye
```
┌──────────────────────────┐
│ Label   (LAY_AUTO)        │  ← altura natural
├──────────────────────────┤
│                          │
│ lista   (LAY_FILL)       │  ← preenche o que sobrou
│                          │
├──────────────────────────┤
│ Button  (LAY_AUTO)        │  ← altura natural
└──────────────────────────┘
```

## Buenas prácticas
- **1 fila `LAY_FILL` + las demás `LAY_AUTO`** es el arreglo más robusto (no se rompe si la fuente
  crece o el teclado se abre).
- Espaciar filas: inserta `add(LAY_AUTO, Gap.ofFont(0.25f))` como espaciador (el `Gap` cuenta como una
  fila de media altura de fuente).

## Errores comunes
- Dar **fracción a todas** las filas (`add(0.2f, …)` en todo) — frágil; prefiere auto + 1 fill.
- Creer que `add(0.7f, x)` es 70% del **sobrante** — es 70% de la **altura total** del contenedor.
- Más de una fila `LAY_FILL` — solo la última prevalece.

## Ver también
- [HorizontalLayout](/docs/ui/layouts/horizontal-layout) · [GridLayout](/docs/ui/layouts/grid-layout) · [Responsividad](/docs/ui/layouts/responsiveness)