# Layouts

> छह layouts, add(LAY_AUTO/LAY_FILL/भिन्न) और वास्तविक स्क्रीन के लिए layouts को नेस्ट करने की तकनीक।

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

# 4. Layouts

> **आप क्या सीखेंगे:** CrossFly कैसे स्थान निर्धारित करता है, और वास्तविक स्क्रीन बनाने के लिए **layouts को
> नेस्ट करने** की तकनीक। **पूर्वापेक्षाएँ:** [कॉम्पोनेंट्स में सोचना](/docs/learn/thinking-in-components)।

## संपूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)
सूची स्क्रीन की निश्चित संरचना, **layouts को नेस्ट करते हुए**: `HorizontalLayout` में header (auto ऊँचाई),
`LAY_FILL` के साथ लचीली सामग्री और auto footer — सब कुछ एक `VerticalLayout` में। जैसा है वैसा ही compile होता है।
```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, प्राकृतिक ऊंचाई (LAY_AUTO)
      Component header = new Component();
      header.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
      header.add(LAY_AUTO, new Button(new MaterialIcon("")));   // आइकन
      header.add(LAY_FILL, new Label("Minhas tarefas"));         // शीर्षक चौड़ाई सोखता है
      add(LAY_AUTO, header);

      // सामग्री: "इलास्टिक" — शेष ऊंचाई सोखता है
      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);

      // फुटर: प्राकृतिक ऊंचाई
      add(LAY_AUTO, new Button("Adicionar"));
   }
}
```
> नीचे के अंश **केवल मूल भाग** दिखाते हैं (जो `onShow()` के भीतर जाता है)। चलाने के लिए, उन्हें ऊपर के `MainWindow` ढाँचे में रखें।

## छह layouts
| Layout | किसके लिए |
|---|---|
| `VerticalLayout` / `HorizontalLayout` | ↓ खड़ी तह लगाना / → अगल-बगल |
| `GridLayout` | भिन्न के अनुसार ग्रिड (चौड़ाइयाँ, फिर कॉम्पोनेंट्स) |
| `RelativeLayout` | एक कॉम्पोनेंट को दूसरे से एंकर करना |
| `EvenlySpacedLayout` | समान रूप से अंतराल देना |
| `RandomLayout` | मुक्त स्थिति (overlays) |

## `add(आकार, comp)` — तीन मामले
```java
add(LAY_AUTO, comp);   //  0f → सामग्री का प्राकृतिक आकार
add(LAY_FILL, comp);   // -1f → शेष स्थान भरता है ("इलास्टिक")
add(0.3f, comp);       // >0  → container के आयाम का 30%
```

## मुख्य तकनीक: layouts को नेस्ट करना
वास्तविक स्क्रीन अलग-अलग layouts वाले containers को **संयोजित** करके बनती हैं। `HorizontalLayout` में
header (auto), `LAY_FILL` में सामग्री, सब कुछ एक `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("")));   // आइकन
header.add(LAY_FILL, new Label("Minhas tarefas"));         // शीर्षक चौड़ाई सोखता है
add(LAY_AUTO, header);                                      // header: प्राकृतिक ऊंचाई

add(LAY_FILL, new VirtualListView(Relative.ofFont(3f), adapter));   // सूची: ऊंचाई सोखती है
```

## इस चरण में क्या बनाया जाता है
सूची स्क्रीन की **निश्चित संरचना**: **header** (auto) + **सूची** (`LAY_FILL`) + footer।

## पुनरावलोकन
`add(0f|-1f|भिन्न, comp)`; प्रति अक्ष एक `LAY_FILL` लचीला तत्व है; वास्तविक स्क्रीन के लिए **layouts को नेस्ट करें**।

## अगले कदम
→ [शैलियाँ और थीम](/docs/learn/styling-and-themes)

## यह भी देखें
- [Layouts (ui)](/docs/ui/layouts) · अवधारणा: [Layout और Relative मॉडल](/docs/concepts/the-layout-and-relative-model)