# HorizontalLayout

> बच्चों को अगल-बगल रखता है, प्रत्येक को कंटेनर की ऊँचाई में।

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

# HorizontalLayout

बच्चा-घटकों को **अगल-बगल** रखता है (प्रति बच्चे एक स्तंभ), बाएँ से दाएँ। यह
[VerticalLayout](/docs/ui/layouts/vertical-layout) का क्षैतिज युग्म है — बार और नियंत्रणों की पंक्तियों
के लिए आदर्श।

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

## कब उपयोग करें
- खोज/क्रिया बार: `[ícone] [campo que estica] [botão]`।
- नियंत्रणों की कोई भी पंक्ति।

## कब उपयोग न करें
- ऊर्ध्वाधर रूप से ढेर लगाना → [VerticalLayout](/docs/ui/layouts/vertical-layout)।
- प्रति पंक्ति अनुपात के साथ कई स्तंभ चाहिए → [GridLayout](/docs/ui/layouts/grid-layout)।

## `add(...)` — हस्ताक्षर और अर्थ
```java
public HorizontalLayout add(float largura, Component c)
```
| मान | अर्थ |
|---|---|
| `LAY_AUTO` (`0f`) | घटक की **प्राकृतिक चौड़ाई** |
| `LAY_FILL` (`-1f`) | **शेष स्थान भरता है** (**एक** FILL स्तंभ का उपयोग करें) |
| `> 0` (ex. `0.5f`) | **कंटेनर की चौड़ाई का भिन्न** |

## कंस्ट्रक्टर
| कंस्ट्रक्टर | विवरण |
|---|---|
| `new HorizontalLayout()` | आइटम **ऊर्ध्वाधर रूप से केंद्रित** |
| `new HorizontalLayout(Position h, Position v)` | `v` = प्रत्येक स्तंभ का ऊर्ध्वाधर संरेखण |

## पूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)
```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 barra = new Component();
      barra.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
      barra.add(LAY_AUTO, new Label("🔎"));               // स्वाभाविक चौड़ाई
      barra.add(LAY_FILL, new TextField("Buscar..."));     // खींचता है
      barra.add(LAY_AUTO, new Button("OK"));               // स्वाभाविक चौड़ाई

      add(LAY_AUTO, barra);                    // बार ऊपर की एक पंक्ति घेरता है
      add(LAY_FILL, new Component());          // बाकी स्क्रीन (placeholder)
   }
}
```

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

## बुनियादी उपयोग
```java
Component barra = new Component();
barra.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
barra.add(LAY_AUTO, new ImageView(/* आइकन */));   // स्वाभाविक चौड़ाई
barra.add(LAY_FILL, new TextField("Buscar..."));    // खींचता है
barra.add(LAY_AUTO, new Button("OK"));              // स्वाभाविक चौड़ाई
```

## यह कैसे व्यवस्थित करता है
```
┌────────┬───────────────────────────┬────────┐
│ ícone  │ campo (LAY_FILL, estica)   │ botão  │
│ (auto) │                           │ (auto) │
└────────┴───────────────────────────┴────────┘
```

## अच्छी प्रथाएँ
- प्रति पंक्ति **1 `LAY_FILL` तत्व** (जिसे खिंचना चाहिए)।
- निश्चित अनुपात के साथ दो "इलास्टिक" → भिन्न (`0.5f`/`0.5f`) या [GridLayout](/docs/ui/layouts/grid-layout)।

## सामान्य त्रुटियाँ
- एक ही पंक्ति में दो `LAY_FILL`।
- भिन्न/auto के बजाय पिक्सेल (`add(120, x)`) का उपयोग करना — उत्तरदायित्व तोड़ता है।

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