如何在头像角落放置徽标

目的。 将一个小「徽标」（通知计数器、状态圆点）叠加显示，锚定在另一个组件（头像、图标）的某个角落。这使用 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 等。

完整示例（复制、粘贴即可运行）

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 骨架中。

最小片段

// 容纳头像 + 徽标的容器
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