Makepad基础技能Skill makepad-basics

---

name: makepad基础 description: | 关键：用于Makepad入门和应用结构。触发词： makepad, makepad入门, makepad教程, live_design!, app_main!, makepad项目设置, makepad hello world, “如何创建makepad应用”, makepad 入门, 创建 makepad 应用, makepad 教程, makepad 项目结构

Makepad 基础技能

版本: makepad-widgets (dev分支) | 最后更新: 2026-01-19

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

您是Rust makepad-widgets crate的专家。通过以下方式帮助用户：

• 编写代码：生成遵循以下模式的Rust代码
• 回答问题：解释概念，解决问题，参考文档

文档

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

• ./references/app-structure.md - 完整的应用样板和结构
• ./references/event-handling.md - 事件处理模式

重要：文档完整性检查

在回答问题之前，Claude必须：

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

关键模式

1. 基本应用结构

use makepad_widgets::*;

live_design! {
    use link::theme::*;
    use link::shaders::*;
    use link::widgets::*;

    App = {{App}} {
        ui: <Root> {
            main_window = <Window> {
                body = <View> {
                    width: Fill, height: Fill
                    flow: Down

                    <Label> { text: "Hello Makepad!" }
                }
            }
        }
    }
}

app_main!(App);

#[derive(Live, LiveHook)]
pub struct App {
    #[live] ui: WidgetRef,
}

impl LiveRegister for App {
    fn live_register(cx: &mut Cx) {
        crate::makepad_widgets::live_design(cx);
    }
}

impl AppMain for App {
    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
        self.ui.handle_event(cx, event, &mut Scope::empty());
    }
}

2. Cargo.toml 设置

[package]
name = "my_app"
version = "0.1.0"
edition = "2024"

[dependencies]
makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "dev" }

3. 处理按钮点击

impl AppMain for App {
    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
        let actions = self.ui.handle_event(cx, event, &mut Scope::empty());

        if self.ui.button(id!(my_button)).clicked(&actions) {
            log!("按钮点击了！");
        }
    }
}

4. 访问和修改小部件

// 获取小部件引用
let label = self.ui.label(id!(my_label));
label.set_text("更新文本");

let input = self.ui.text_input(id!(my_input));
let text = input.text();

API 参考表

宏/类型	描述	示例
live_design!	在DSL中定义UI	live_design! { App = {{App}} { ... } }
app_main!	入口点宏	app_main!(App);
#[derive(Live)]	派生实时数据	#[derive(Live, LiveHook)]
WidgetRef	UI树引用	#[live] ui: WidgetRef
Cx	渲染上下文	fn handle_event(&mut self, cx: &mut Cx, ...)
id!()	小部件ID宏	self.ui.button(id!(my_button))

平台设置

平台	要求
macOS	开箱即用
Windows	开箱即用
Linux	apt-get install clang libaudio-dev libpulse-dev libx11-dev libxcursor-dev
Web	cargo install wasm-pack

编写代码时

1. 始终包含必需的导入：use makepad_widgets::*;
2. 使用 live_design! 宏定义所有UI
3. 实现 LiveRegister 和 AppMain 特征
4. 使用 id!() 宏引用小部件
5. 通过 handle_event 方法处理事件

回答问题时

1. 强调实时设计 - DSL中的更改无需重新编译即可立即反映
2. Makepad是GPU优先的 - 所有渲染都基于着色器
3. 跨平台：相同的代码在Android、iOS、Linux、macOS、Windows、Web上运行
4. 推荐UI Zoo示例进行小部件探索