# HorizontalLayout

> 把子组件从左到右并排排列，每个都占满容器的高度，适合工具栏和按钮组。

Source: https://crossfly.dev/zh/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`（例如 `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());          // 屏幕其余部分（占位符）
   }
}
```

> 下面的片段只展示**核心部分**（放进 `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`。
- 使用像素（`add(120, x)`）而非分数/自动——会破坏响应式。

## 另请参阅
- [VerticalLayout](/docs/ui/layouts/vertical-layout) · [GridLayout](/docs/ui/layouts/grid-layout) · [响应式设计](/docs/ui/layouts/responsiveness)