UI 框架速查手册

> 源文档：https://aigamepro.work/ui_en/index.html

📦 内容结构

uiapi/
├── SKILL.md          ← 入口文件（当前）
├── layout/           ← 布局组件（15个）
├── control/          ← 控件组件（16个）
├── container/        ← 容器组件（14个）
├── example/           ← 综合案例（8个）
├── api/              ← API 对象（4个）
└── reference/        ← 父类/属性参考（6个）

🗂️ 布局组件（layout/）

| 文件 | 说明 |

|------|------|

| 绝对布局.md | X,Y 绝对定位 |

| 相对布局.md | 相对兄弟元素定位 |

| 网格布局.md | 行列网格布局 |

| 帧布局.md | 层叠覆盖布局 |

| 卡片布局.md | 带圆角阴影的卡片 |

| 约束布局.md | 约束链与指南 |

| 锚点布局.md | 相对边缘锚定 |

| 流式布局.md | 自动换行流排列 |

| 滚动布局.md | 超出区域可滚动 |

| 滑动布局.md | 水平/垂直滑动 |

| 折叠布局.md | 可展开/收起 |

| 抽屉布局.md | 侧滑抽屉 |

| 刷新布局.md | 下拉刷新 |

| 包含布局.md | 引用子布局文件 |

| 线性布局.md | 水平/垂直排列 |

🎛️ 控件组件（control/）

| 文件 | 说明 |

|------|------|

| 按钮.md | 基础按钮 |

| 按钮组.md | 按钮组单选 |

| 多选框.md | CheckBox |

| 小片.md | Material Chip |

| 小片组.md | ChipGroup |

| 下拉框.md | DropDown |

| 编辑框.md | EditText |

| 分割线.md | 水平分割线 |

| 图片与图标.md | ImageView |

| 输入框.md | 增强输入框 |

| 单选按钮.md | RadioButton |

| 单选按钮组.md | RadioGroup |

| 范围.md | 双滑块范围选择 |

| 拖动条.md | SeekBar |

| 滑动条.md | Material Slider |

| 开关.md | SwitchCompat |

📦 容器组件（container/）

| 文件 | 说明 |

|------|------|

| 应用条.md | Toolbar |

| 应用条布局.md | AppBarLayout |

| 导航栏.md | NavigationBar |

| 工具栏.md | TabBar |

| 状态栏.md | StatusBar |

| 加载.md | Loading 遮罩 |

| 日志.md | LogView |

| 列表.md | ListView / RecyclerView |

| 轨道.md | Rail 动态容器 |

| 悬浮按钮.md | FloatingActionButton |

| 进度条.md | ProgressBar / Progress |

| 标签布局.md | TabLayout |

| 视频.md | VideoView |

| 网页.md | WebView |

📖 API 对象（api/）

| 文件 | 说明 |

|------|------|

| 界面交互.md | $ui、$floaty、$dialog |

| 底部弹窗.md | BottomSheet |

| 界面对象.md | UiBinding / UiObject |

| 桥梁对象.md | Bridge 对象 |

💡 综合案例（example/）

| 文件 | 说明 |

|------|------|

| 案例-登录界面.md | 账号密码表单 |

| 案例-折叠文本.md | Expand 折叠展开 |

| 案例-标签联动.md | Tab + Pager 联动 |

| 案例-下载图片.md | HTTP + Progress |

| 案例-日志框架.md | LogView 实时日志 |

| 案例-动态组件.md | Rail 动态添加 |

| 案例-简易播放器.md | VideoView 播放控制 |

| 案例-功能交互.md | WebView JS 互调 |

🔧 参考文档（reference/）

| 文件 | 说明 |

|------|------|

| 布局父类.md | XLayout 通用属性 |

| 控件父类.md | XView 通用属性 |

| 文本.md | 所有控件的 text 属性说明 |

| 补充文档.md | 额外说明 |

| 颜色属性对照表.md | 颜色值速查 |

| 重力属性对照表.md | gravity 值速查 |

⚠️ XML 语法声明与强制约束

> 本文档中的 XML 是 AIGame/AutoGOD 框架专用的 UI 布局 XML 语法，

> 不是 Android 原生 XML 布局，两者不可混淆！

框架区分

| | AIGame/AutoGOD XML | Android 原生 XML |

|---|---|---|

| 标签 | | |

| 属性命名 | text bg w h radius | android:text android:background android:layout_width |

| 取值方式 | bg="#57965C" w="200" | android:background="#57965C" android:layout_width="200dp" |

| 命名空间 | 无命名空间 | 需 xmlns:android="..." |

| 大小写 | 小写标签名 | 通常 PascalCase |

🚫 禁止的错误用法

以下用法会导致脚本运行失败或界面无法渲染，严禁在 AIGame/AutoGOD 场景下使用：

❌ 使用 android: 前缀的属性
   → layout_width, layout_height, text, background 等全部不可加 android:
   → 正确写法: w="200" h="wrap" bg="#57965C" text="标题"
   → 错误写法: android:layout_width="200dp" android:text="标题"

❌ 使用 PascalCase 或 camelCase 标签名
   → 错误写法: <Button> <LinearLayout> <EditText> <ImageView>
   → 正确写法: <button> <linear> <edit> <img>

❌ 使用 Android layout_ 前缀
   → 错误: layout_margin, layout_gravity, layout_weight
   → 正确: margin, gravity, weight

❌ 在 AIGame 布局 XML 中使用 dp/sp 等单位后缀
   → 错误: w="200dp" textSize="16sp"
   → 正确: w="200" textSize="16"（框架默认单位即为 dp/sp）

❌ 在 JS 代码中直接写 Android View 方法
   → 错误: btn.setVisibility(View.GONE)
   → 正确: btn.visibility("gone")（见各控件文档的具体方法）

❌ 在 XML 中使用 android:layout_constraint 等约束属性
   → 正确写法见约束布局.md中的具体约束属性（如 chain、constraint 等）

❌ 在 XML 中使用 ViewGroup 子类的 Android 属性（如orientation、baselineAligned等）
   → linear 的方向属性是 dir（"v"/"h"），不是 android:orientation

✅ 正确用法示例

<!-- AIGame XML（正确） -->
<linear id="root" dir="v" w="match" h="match" padding="16">
  <text text="标题" textColor="#333333" textSize="18" />
  <edit id="mInput" hint="请输入内容" w="match" margin_top="10" />
  <button id="mBtn" text="提交" bg="#57965C" w="match" margin_top="20" radius="5" />
</linear>

<!-- Android 原生 XML（错误，禁止混用） -->
<LinearLayout android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <TextView android:text="标题"
        android:textColor="#333333"
        android:textSize="18sp" />

    <EditText android:hint="请输入内容"
        android:layout_width="match_parent"
        android:layout_marginTop="10dp" />

    <Button android:text="提交"
        android:background="#57965C"
        android:layout_width="match_parent"
        android:layout_marginTop="20dp"
        android:radius="5dp" />
</LinearLayout>

---

🚀 快速开始

加载界面

let ui = $ui.layout("ui.xml");

获取控件

let btn = ui.id("mBtn");     // 按 id 获取
let txt = ui.tag("text");    // 按标签获取

事件监听

btn.click(() => {
    toast("点击成功");
});

创建控件

let btn = $ui.create("button", {
    text: "动态按钮",
    w: "wrap"
});
parent.add(btn);