# EvenlySpacedLayout

> 在一个轴上以相等的间距分布子组件，同时保留每个组件的尺寸。

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

# EvenlySpacedLayout

在一个轴上（默认水平）以**相等的间距**分布子组件，同时**保留每个组件的尺寸**。非常适合尺寸自适应的图标/按钮工具栏。

> 🟡 · **包：** `dev.crossfly.ui.layout` · **继承自：** `Layout`

## 何时使用
- 应保持等间距的操作栏 / 图标工具栏。

## 何时不要使用
- 当各项应**拉伸**以填满空间时 → 使用
  [HorizontalLayout](/docs/ui/layouts/horizontal-layout) 中的分数。

## `add(...)` 与构造函数
```java
public EvenlySpacedLayout add(Component c);      // （或 add(Component...)）
new EvenlySpacedLayout();                          // HORIZONTAL（默认）
new EvenlySpacedLayout(Orientation.VERTICAL);      // 垂直轴
```

## ⚠️ 关键点：它不会调整各项的尺寸
该布局只**分配间距**——每一项的**尺寸**来自当前的 bounds 或自动尺寸。对于响应式的各项，请通过**样式**（`autoWidth`/`autoHeight`）配合 `Relative` 为其指定尺寸。

## 完整示例（复制、粘贴并运行）
```java
package com.exemplo;

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

/** 可执行的主界面。将 launcher 指向此类（classname）并运行：gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();

      String[] icones = { "home", "search", "settings", "person" };

      Component toolbar = new Component();
      toolbar.setLayout(new EvenlySpacedLayout());                 // 水平
      Relative lado = Relative.ofScreen(0.12f, ScreenSize.MIN);    // 较短边的 12% → 响应式方形
      for (String glyph : icones) {
         Button b = new Button(new MaterialIcon(glyph));
         b.getStyle().autoWidth(lado).autoHeight(lado);            // 由样式决定的响应式尺寸
         toolbar.add(b);
      }

      setLayout(new VerticalLayout(Position.START, Position.START));
      add(LAY_FILL, new Component());   // 内容（占位符）
      add(LAY_AUTO, toolbar);           // 底部的操作栏
   }
}
```

> 下面的片段只展示**核心部分**（放进 `onShow()` 里的内容）。要运行它们，请将其放入上面的 `MainWindow` 骨架中。

## 基本用法
```java
Component toolbar = new Component();
toolbar.setLayout(new EvenlySpacedLayout());                 // 水平
Relative lado = Relative.ofScreen(0.12f, ScreenSize.MIN);    // 较短边的 12% → 响应式方形
for (String glyph : icones) {
   Button b = new Button(new MaterialIcon(glyph));
   b.getStyle().autoWidth(lado).autoHeight(lado);            // 由样式决定的响应式尺寸
   toolbar.add(b);
}
```

## 排布方式
```
│   [i1]     [i2]     [i3]   │   ← espaços iguais entre e nas bordas; itens mantêm seu tamanho
```

## 最佳实践
- 通过 `Relative` 指定各项的尺寸（用 `ofScreen(..., ScreenSize.MIN)` 得到可适配竖屏/横屏的正方形）。

## 常见错误
- 期望各项自动变为相同尺寸——它们不会；请自行设定尺寸。
- 用固定像素来设定各项的尺寸。

## 另请参阅
- [HorizontalLayout](/docs/ui/layouts/horizontal-layout) · [响应式设计](/docs/ui/layouts/responsiveness)