# 如何在头像角落放置徽标

> 使用 RelativeLayout 将一个徽标/计数器叠加到另一个组件的角落。

Source: https://crossfly.dev/zh/docs/cookbook/ui/badge-no-avatar — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# 如何在头像角落放置徽标

**目的。** 将一个小「徽标」（通知计数器、状态圆点）叠加显示，锚定在另一个组件
（头像、图标）的某个角落。这使用 `RelativeLayout`，它通过相对于另一个子组件的
锚点来定位子组件。

## 所用 API
- `new RelativeLayout()` — 通过 `RelPos` 锚点定位、通过 `RelSize` 确定尺寸的布局。
- `layout.add(Component target, RelPos x, RelPos y, RelSize w, RelSize h, Component relative)` — 添加 `target`，其位置**相对于** `relative`。
- `RelPos.END_OF` — 将徽标的末端（右侧）边缘与头像的末端边缘对齐。
- `RelPos.START` — 将徽标的顶部与头像的顶部对齐（垂直锚点 START）。
- `RelSize.AUTOSIZE` — 徽标使用其自身的首选尺寸（宽度和高度）。
- `container.setLayout(layout)` — 在容器上安装 `RelativeLayout`。

> 重要验证：在源码中，枚举值为 `RelSize.AUTOSIZE`
> （而非 `AUTO`）、`RelSize.FILL`、`RelSize.FIT`、`RelSize.SAMESIZE`、`RelSize.KEEPSIZE`；
> 以及 `RelPos.END_OF`、`RelPos.START`、`RelPos.AFTER`、`RelPos.CENTER_OF` 等。

## 完整示例（复制、粘贴即可运行）
```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());

      // 示例组件：一个"头像"和一个"徽标"计数器
      Component avatar = new Component().style(Styles.component().backColor(0xFFCCCCCC));
      Component badge  = new Label("3").style(Styles.component().backColor(0xFFFF3B30).textColor(0xFFFFFFFF));

      // 容纳头像 + 徽标的容器
      Component container = new Component().style(Styles.transparent());
      RelativeLayout rl = new RelativeLayout();

      // 1) 头像：锚定在左上角，尺寸自动
      rl.add(avatar, RelPos.START, RelPos.START, RelSize.AUTOSIZE, RelSize.AUTOSIZE);

      // 2) 徽标：位于头像的右上角（x 用 END_OF，y 用 START），
      //    自身尺寸。最后一个参数（avatar）是参照物。
      rl.add(badge, RelPos.END_OF, RelPos.START, RelSize.AUTOSIZE, RelSize.AUTOSIZE, avatar);

      container.setLayout(rl);
      add(container);
   }
}
```

> 下面的片段只展示**核心部分**。要运行它，请把它放进上面的 `MainWindow` 骨架中。

## 最小片段
```java
// 容纳头像 + 徽标的容器
Component container = new Component().style(Styles.transparent());
RelativeLayout rl = new RelativeLayout();

// 1) 头像：锚定在左上角，尺寸自动
rl.add(avatar, RelPos.START, RelPos.START, RelSize.AUTOSIZE, RelSize.AUTOSIZE);

// 2) 徽标：位于头像的右上角（x 用 END_OF，y 用 START），
//    自身尺寸。最后一个参数（avatar）是参照物。
rl.add(badge, RelPos.END_OF, RelPos.START, RelSize.AUTOSIZE, RelSize.AUTOSIZE, avatar);

container.setLayout(rl);
add(container);
```

> **验证说明（2026 代码）。** 已在 `RelativeLayout` 中确认：带显式引用的
> 签名为 `add(Component, RelPos, RelPos, RelSize, RelSize, Component)`。
> `END_OF` 将 x 解析为「引用的末端边缘减去徽标的宽度」（徽标
> 贴在头像的右侧）；y 上的 `START` 与顶部对齐。要把徽标偏移
> 到角落「外侧」（经典的叠加效果），请调整徽标的 `outgap` ——
> 有一个重载 `add(..., Component relative, Gap outgap)`。如果你省略
> 引用，布局会使用**上一个添加的组件**作为引用。

## 深入了解
- 可点击卡片（与 GridLayout 组合）：[card-clicavel.md](/docs/cookbook/ui/card-clicavel)