# VerticalLayout

> बच्चों को ऊपर से नीचे ढेर करता है, प्रत्येक को कंटेनर की चौड़ाई में।

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

# VerticalLayout

बच्चा-घटकों को **ऊपर से नीचे** ढेर करता है (प्रति बच्चे एक पंक्ति), प्रत्येक **कंटेनर की चौड़ाई**
(मार्जिन घटाकर) घेरता है। यह सबसे अधिक उपयोग किया जाने वाला लेआउट है — अधिकांश स्क्रीनों की रीढ़।

> 🟢 · **पैकेज:** `dev.crossfly.ui.layout` · **विस्तार करता है:** `Layout`

## कब उपयोग करें
- स्तंभ में स्क्रीन: शीर्षलेख + सामग्री + पादलेख।
- ढेर किए गए अनुभागों की कोई भी सूची।

## कब उपयोग न करें
- अगल-बगल आइटम → [HorizontalLayout](/docs/ui/layouts/horizontal-layout)।
- लेबल/फ़ील्ड ग्रिड → [GridLayout](/docs/ui/layouts/grid-layout)।

## `add(...)` — हस्ताक्षर और अर्थ
```java
public VerticalLayout add(float altura, Component c)
```
**`altura`** पैरामीटर पंक्ति को नियंत्रित करता है:

| मान | अर्थ |
|---|---|
| `LAY_AUTO` (`0f`) | घटक की **प्राकृतिक ऊँचाई** (`getAutoHeight()`) — फ़ॉन्ट के साथ स्केल करता है |
| `LAY_FILL` (`-1f`) | **शेष स्थान भरता है** (प्रति लेआउट **एक** FILL पंक्ति का उपयोग करें) |
| `> 0` (ex. `0.25f`) | **कंटेनर की ऊँचाई का भिन्न** (25%) — पिक्सेल नहीं हैं |

## कंस्ट्रक्टर
| कंस्ट्रक्टर | विवरण |
|---|---|
| `new VerticalLayout()` | प्रत्येक पंक्ति का क्षैतिज संरेखण **केंद्रित** |
| `new VerticalLayout(Position h, Position v)` | `h` = पंक्तियों का क्षैतिज संरेखण (`START`/`CENTER`/`END`) |

## पूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)
```java
package com.exemplo;

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

/** चलाने योग्य मुख्य स्क्रीन। launcher (classname) की ओर संकेत करें और चलाएँ: 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();          // लचीली सामग्री (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"));   // हेडर — स्वाभाविक ऊंचाई
      add(LAY_FILL, lista);                    // सामग्री — पूरी बची जगह घेरता है
      add(LAY_AUTO, new Button("Adicionar"));  // फुटर — स्वाभाविक ऊंचाई
   }
}
```

> नीचे दिए गए अंश **केवल मूल भाग** दिखाते हैं (जो `onShow()` के अंदर जाता है)। चलाने के लिए, उन्हें ऊपर दिए गए `MainWindow` ढाँचे में रखें।

## बुनियादी उपयोग
```java
setLayout(new VerticalLayout(Position.START, Position.START));
add(LAY_AUTO, new Label("Produtos"));   // हेडर — स्वाभाविक ऊंचाई
add(LAY_FILL, lista);                    // सामग्री — पूरी बची जगह घेरता है
add(LAY_AUTO, new Button("Adicionar"));  // फुटर — स्वाभाविक ऊंचाई
```

## यह कैसे व्यवस्थित करता है
```
┌──────────────────────────┐
│ Label   (LAY_AUTO)        │  ← altura natural
├──────────────────────────┤
│                          │
│ lista   (LAY_FILL)       │  ← preenche o que sobrou
│                          │
├──────────────────────────┤
│ Button  (LAY_AUTO)        │  ← altura natural
└──────────────────────────┘
```

## अच्छी प्रथाएँ
- **1 `LAY_FILL` पंक्ति + शेष `LAY_AUTO`** सबसे मज़बूत व्यवस्था है (फ़ॉन्ट बढ़ने या कीबोर्ड खुलने पर नहीं टूटती)।
- पंक्तियों को अंतरित करना: स्पेसर के रूप में `add(LAY_AUTO, Gap.ofFont(0.25f))` डालें (`Gap` आधी फ़ॉन्ट
  ऊँचाई की एक पंक्ति के रूप में गिना जाता है)।

## सामान्य त्रुटियाँ
- **सभी पंक्तियों को भिन्न** देना (हर चीज़ में `add(0.2f, …)`) — नाजुक; auto + 1 fill को प्राथमिकता दें।
- यह सोचना कि `add(0.7f, x)` **शेष** का 70% है — यह कंटेनर की **कुल ऊँचाई** का 70% है।
- एक से अधिक `LAY_FILL` पंक्ति — केवल अंतिम प्रभावी होती है।

## यह भी देखें
- [HorizontalLayout](/docs/ui/layouts/horizontal-layout) · [GridLayout](/docs/ui/layouts/grid-layout) · [उत्तरदायित्व](/docs/ui/layouts/responsiveness)