name: makepad-splash description: | 关键：用于 Makepad Splash 脚本语言。触发词： splash 语言，makepad 脚本，makepad 脚本编写，script!，cx.eval， makepad 动态，makepad AI，splash 语言，makepad 脚本

Makepad Splash 技能

版本： makepad-widgets（开发分支） | 最后更新： 2026-01-19

检查更新：https://crates.io/crates/makepad-widgets

您是 Makepad Splash 脚本语言的专家。通过以下方式帮助用户：

编写 Splash 脚本：动态 UI 和工作流自动化
理解 Splash：目的、语法和功能

文档

参考本地文件获取详细文档：

./references/splash-tutorial.md - Splash 语言教程

重要：文档完整性检查

回答问题前，Claude 必须：

阅读上述相关参考文件
如果文件读取失败或为空：
- 通知用户：“本地文档不完整，建议运行 /sync-crate-skills makepad --force 更新文档”
- 仍基于 SKILL.md 模式和内置知识回答
如果参考文件存在，将其内容融入答案

什么是 Splash？

Splash 是 Makepad 的动态脚本语言，专为以下设计：

AI 辅助工作流
动态 UI 生成
快速原型设计
HTTP 请求和异步操作

脚本宏

// 在 Rust 中嵌入 Splash 代码
script!{
    fn main() {
        let x = 10;
        console.log("Hello from Splash!");
    }
}

执行

// 在运行时评估 Splash 代码
cx.eval(code_string);

// 带上下文
cx.eval_with_context(code, context);

基本语法

变量

let x = 10;
let name = "Makepad";
let items = [1, 2, 3];
let config = { width: 100, height: 50 };

函数

fn add(a, b) {
    return a + b;
}

fn greet(name) {
    console.log("Hello, " + name);
}

控制流

// 条件语句
if x > 10 {
    console.log("big");
} else {
    console.log("small");
}

// 循环
for i in 0..10 {
    console.log(i);
}

while condition {
    // ...
}

内置对象

console

console.log("消息");
console.warn("警告");
console.error("错误");

http

// GET 请求
let response = http.get("https://api.example.com/data");

// POST 请求
let response = http.post("https://api.example.com/data", {
    body: { key: "value" }
});

timer

// 设置超时
timer.set(1000, fn() {
    console.log("1 秒过去了");
});

// 设置间隔
let id = timer.interval(500, fn() {
    console.log("滴答");
});

// 清除计时器
timer.clear(id);

部件交互

// 访问部件
let button = ui.widget("my_button");
button.set_text("点击我");
button.set_visible(true);

// 监听事件
button.on_click(fn() {
    console.log("按钮被点击！");
});

异步操作

// 异步函数
async fn fetch_data() {
    let response = await http.get("https://api.example.com");
    return response.json();
}

// 调用异步
fetch_data().then(fn(data) {
    console.log(data);
});

AI 工作流集成

Splash 专为 AI 辅助开发设计：

// 动态 UI 生成
fn create_form(fields) {
    let form = ui.create("View");
    for field in fields {
        let input = ui.create("TextInput");
        input.set_label(field.label);
        form.add_child(input);
    }
    return form;
}

// AI 可以动态生成此代码
create_form([
    { label: "姓名" },
    { label: "邮箱" },
    { label: "消息" }
]);

使用案例

快速原型设计：无需重新编译快速测试 UI 布局
AI 代理：让 AI 动态生成和修改 UI
配置：运行时配置应用行为
脚本化工作流：自动化重复任务
插件系统：用脚本扩展应用功能

回答问题时

Splash 用于动态/运行时脚本，不是核心应用逻辑
对性能关键代码使用 Rust，对灵活性使用 Splash
Splash 语法类似 JavaScript/Rust 混合
脚本在沙盒环境中运行
HTTP 和计时器 API 支持异步操作