- 原创/转载
- 二改
- 作者
- 17Artist、MayIHaveK、Mo
ArcartX Aria UI
概述
ArcartX Aria UI 是一个为 ArcartX 开发者设计的 VSCode 扩展,旨在简化 ArcartX UI 的 YAML 配置工作。通过提供智能代码片段、上下文感知补全、Aria 脚本高亮与补全、颜色装饰渲染、侧边栏工具箱等功能,帮助开发者快速构建复杂的用户界面。功能特点
语法高亮
YAML + Aria 脚本混合语法高亮,在 |-/|代码块中自动切换 Aria 语法
内置 Aria 语义着色主题(变量、函数、关键字、字符串、数字等独立颜色)
智能补全
上下文感知的 UI 结构补全— 根据当前 YAML 路径自动推断补全上下文
- 根级别:UI 模板、tips、controls、entity_model 等
controls下:控件模板(Texture、Text、Slot、HGrid 等)- 控件内部:
type、attribute、children、action等属性 attribute:下:根据控件type自动过滤只显示相关属性action:下:触发器列表(click、hover、tick、create 等)children:下:子控件模板tasks下:定时任务模板与属性
self./val./var.后自动弹出上下文相关函数列表- UI 级别与控件级别自动区分,显示不同的 self 函数
智能类型模板 — 输入 type:选择控件类型后,自动生成attribute块并预填专属属性
控件结构模板化 — 完整控件模板(含控件名、type、attribute、默认值),一键插入
触发方式
? | 在任意位置输入 ? 触发当前上下文的补全列表 |
/ | 在任意位置输入 / 触发当前上下文的补全列表 |
: | 输入属性名 + : 后自动触发属性值补全(如 type: → 控件类型列表) |
. | 输入 self. / val. / var. 后触发函数补全 |
开发辅助
悬停文档 — 鼠标悬停在控件类型、属性名、属性值(锚点、形状、对齐等)、Aria 函数上显示详细文档和示例
签名提示 — 输入 Aria 函数调用时弹出参数提示,显示参数名和类型
代码诊断 — 自动检测无效控件类型、混合缩进、未闭合代码块等常见错误
跳转定义 — Ctrl+点击变量名、控件名、模板 ID 快速跳转到声明位置
颜色装饰渲染
RGBA 色块 — ~R,G,B,A值旁自动显示对应颜色色块,直观预览
Frosted 色块 — Frosted:blur;R,G,B,A毛玻璃语法旁显示 RGBA 色块,直观预览颜色
§# 文字着色 — §#RRGGBB颜色码后的文字直接以该颜色渲染,颜色码本身显示色块标记
§~ 渐变逐字插值 — §~RRGGBB-RRGGBB颜色码后的文字逐字在两个颜色之间线性插值,每个字符显示不同的渐变色,颜色码本身显示双色块标记
§a / &b Minecraft 颜色码 — §0-§f和&0-&f共 16 种标准颜色码显示色块标记并着色后续文字,遇到下一个颜色码或§r/&r自动停止
侧边栏工具箱
ArcartX 工具箱面板— 活动栏中的多功能侧边栏面板,标题随 Tab 切换动态更新
- RGBA 色块 — 可视化色板选择器,滑块调节 RGBA 值,一键插入
~R,G,B,A格式 - 毛玻璃 Frosted — 模糊度 + RGBA 滑块,实时预览毛玻璃效果,插入
~Frosted:blur;R,G,B,A格式 - 文字颜色 — 选择颜色后插入
§#RRGGBB格式码 - 渐变色 — 双色选择器,预览渐变效果,插入
§~RRGGBB-RRGGBB格式码 - 色板 — 预设常用颜色快速选取
- 控件模板 — 浏览并插入完整控件模板(Texture、Text、Slot、Grid 等)
- 特效模板 — 浏览并插入控件特效模板(Neon、Shadow 等)
- UI 模板 — 浏览并插入 UI 配置模板(完整 UI、基础设定、控件结构等)
- 自定义模板 — 用户自建模板,支持添加 / 删除 / 复制 / 插入 / 预览,持久化存储
- RGBA 色块 — 可视化色板选择器,滑块调节 RGBA 值,一键插入
安装方法
从 VSIX 安装
下载的.vsix 文件使用方法
- 打开或创建一个
.arx文件(或手动在右下角选择 "ArcartX UI YAML" 语言模式) - 输入
?或/触发当前上下文的补全列表 - 输入属性名 +
:自动触发属性值补全(如type:→ 控件类型列表) - 在
|-或|代码块中编写 Aria 脚本,输入self./val.触发函数补全
支持的控件类型
Texture | 普通图片控件 |
Text | 文本控件 |
9SliceTexture | 九宫格图片(可拉伸) |
TextBox | 文本输入框 |
Entity | 实体渲染控件 |
Model | 模型渲染控件(支持部位裁剪) |
Slot | 物品槽位 |
Canvas | 画布容器 |
Adaptive | 自适应容器(等比缩放) |
HGrid / VGrid | 水平 / 垂直网格布局 |
HStack / VStack | 水平 / 垂直堆叠布局 |
Scroll | 滚动容器 |
Progress | 进度条 |
Compass | 指南针 / 路标控件 |
BossBar | Boss 血条控件 |
Chat / ChatTextBox | 聊天框 / 聊天输入框 |
Suggestion | 命令建议提示控件 |
Observer | 数据驱动列表控件 |
Import | 跨 UI 导入控件 |
Card | 聊天卡片根控件 |
BossBars | 血条排列器 |