如何使用 Makepad DSL 定义 Rust UI 组件与样式

解决 Makepad 框架中 UI 定义过于繁琐的问题：通过掌握 live_design! 宏及其 DSL 语法，让 AI 帮你快速构建可继承、可热重载的 UI 声明，并将其与 Rust 逻辑无缝链接。

为什么需要这个技能

Makepad 采用了独特的声明式 DSL（领域特定语言），允许开发者在 live_design! 宏中定义 UI 结构和样式。与传统的纯 Rust 代码定义不同，DSL 支持强大的原型继承和实时热重载，这意味着你无需重新编译整个项目即可看到界面变更。

如果 AI 仅按照通用 Rust 语法来编写 UI，会丢失 Makepad 最核心的“原型-实例”设计模式。掌握此技能可以让 AI 精确生成符合 Makepad 规范的组件代码，大幅提升界面开发效率。

定义原型（Named Object）：创建一个命名的样式对象，作为后续组件的基类。

MyButton = {
    width: Fit
    height: 40.0
    draw_bg: { color: #333333 }
}

实现继承与覆盖（Inheritance）：使用 <Parent> 语法继承原型，并覆盖特定属性。
```
PrimaryButton = <MyButton> {
    draw_bg: { color: #0066CC }
}
```

实例化组件：在布局中调用组件，并嵌套子组件。

<View> {
    width: Fill
    <Button> { text: "点击我" }
}

链接 Rust 结构体：使用 {{Type}} 语法将 DSL 绑定到具体的 Rust struct。
```
MyWidget = {{MyWidget}} {
    width: 100.0
}
```

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

暂无推荐