古法编程

快速上手 Makepad：Rust GPU 界面开发基础指南

解决 Rust 开发者进入 Makepad 生态的门槛问题：通过规范化 AI 指令，快速生成包含 live_design! 和 app_main! 的标准应用骨架，实现 GPU 加速的跨平台 UI 开发。

为什么需要这个技能

Makepad 与传统的 Rust GUI 库（如 iced 或 slint）截然不同。它采用了 GPU-first 的设计理念，所有渲染均基于 Shader，并引入了极其强大的 Live Design 机制——允许开发者在不重新编译代码的情况下，实时修改 UI 声明。

由于其独特的宏系统（如 live_design!）和 Trait 实现要求（LiveRegister 与 AppMain），初学者很难快速搭建起正确且可运行的项目结构。掌握此技能可以让 AI 精确地为你生成符合 makepad-widgets 规范的样板代码。

适用场景

  • 从零启动项目：需要快速创建第一个 “Hello World” 或应用原型。
  • 构建基础界面：定义应用主窗口、布局容器及基础控件（Label, Button, Text Input）。
  • 理解事件流：学习如何在 handle_event 中通过 id!() 宏与 UI 组件交互。
  • 跨平台配置：在 Windows、macOS、Linux 或 Web 端配置运行环境。

核心工作流

  1. 配置环境：在 Cargo.toml 中引入 makepad-widgets 的 dev 分支。
  2. 定义 UI 声明：使用 live_design! 宏编写 DSL 风格的界面结构，定义组件层级与样式。
  3. 实现应用逻辑：
    • 定义结构体并派生 Live 和 LiveHook。
    • 实现 LiveRegister 完成 UI 注册。
    • 实现 AppMain 并在 handle_event 中处理用户交互。
  4. 运行与实时调试：启动应用后，直接修改 live_design! 块中的参数，观察界面实时变化。

核心代码模式示例 

use makepad_widgets::*;

live_design! {
    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());
    }
}

下载和安装

下载 makepad-basics 中文版 Skill ZIP

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

你可能还需要

暂无推荐