10 分钟跑起第一个 Makepad 应用：先把窗口开起来

前言

前两篇我们聊的是：

为什么 Rust GUI 值得看
Makepad、egui、Dioxus、Tauri 到底怎么选

这一篇开始动手。

先说清楚，这篇不是"从零手搓完整项目"的大教程。

我自己看下来，Makepad 新手最容易踩的坑，不是代码写错，而是第一步走得太重：

一上来就 cargo new
一上来就研究架构
一上来就死盯旧资料里的 live_design!

最后窗口还没出来，人先被自己劝退。

所以这篇的目标很简单：

先把界面跑起来。按钮能点，文字能改，心里就有底了。

1. 先说结论：别急着自己搭，先跑官方 example

如果你现在就想试 Makepad，我的建议很简单：

先别空手搭工程，先跑官方仓库里的最小示例。

截至 2026 年 6 月 6 日，Makepad 官方仓库 README 里最明确的入口，已经是：

makepad-studio 作为主入口
examples/ 目录里的官方示例作为最稳的上手材料

而且当前 dev 分支里的入门示例，已经明显偏向 script_mod! / Splash 这套写法了。

这里得提醒一句。如果你之前搜到的是老教程，里面一直在讲 live_design!，那也不一定错，只是你看的很可能不是同一代资料。这个时间差不先说清楚，新手很容易直接看乱。

所以这一篇不猜语法，直接按当前官方 example 走。

2. 10 分钟跑起来，最短路径是这个

先准备环境：

装好 Rust stable
如果你在 Linux / WSL，先按官方 README 安装系统依赖

然后直接跑官方仓库里的 counter 示例：

bash 复制代码

git clone https://github.com/makepad/makepad.git
cd makepad
cargo run -p makepad-example-counter --release

如果一切正常，你会看到一个很小的窗口，里面至少有：

一行计数文本
一个 Increment 按钮

说实话，窗口真弹出来那一下，感觉会踏实很多。

在这之前，Makepad 对很多人来说只是个名字。到这一步，它才变成"我本地真的跑起来了一个 Rust GUI"。

3. 跑起来之后，先只看懂 3 个点

很多人第一次打开示例代码，会下意识从第一行读到最后一行，想一次看懂。

没必要。

Makepad 这种东西，第一次读代码更适合拆着看。

你先只看这 3 个问题：

窗口在哪里定义
按钮和文本在哪里放进去
点击之后为什么会有反应

这 3 个点看明白，第一关就过了。

3.1 窗口是怎么出来的

在当前官方 counter 示例里，窗口定义是写在 script_mod! 里的 Splash DSL 片段里，大意长这样：

text 复制代码

main_window := Window {
    window.inner_size: vec2(420, 220)
}

先注意一件事：main_window := 不是普通 Rust 赋值语法，它是 Makepad 当前这套 UI DSL 里的写法。

这里先不用抠细节。

你只要先记住两件事：

Window 就是窗口本体
window.inner_size 控制窗口初始大小

你先只要知道，在 Makepad 里，桌面窗口大概从这里起步。这个点抓住了，后面看布局就不容易乱。

3.2 文本和按钮是怎么放进去的

窗口里面的内容，当前示例是往 body 里加的，再套一层 View 做布局。

第一次看时，你可以先粗暴理解成：

Window 是外壳
body 是内容区
View 是里面的排版容器
Label 和 Button 是你看得见的控件

一个简化后的理解版本，大概是这样：

text 复制代码

body +: {
    View {
        width: Fill,
        height: Fill,
        flow: Down,
        align: Center

        Label { text: "Count: 0" }
        Button { text: "Increment" }
    }
}

同样，body +: 也不是普通 Rust 语法，而是 DSL 里"往这个区域继续挂内容"的写法。这里我只是拿它说明结构关系，不是让你把这段当成独立 Rust 代码直接粘过去。

这段最先要看的不是语法细节，而是空间关系：

flow: Down 表示从上往下排
align: Center 表示整体居中
Label 负责显示文字
Button 负责点击交互

第一次上手时，最有效的小动作其实是直接改文案。

比如把：

Count: 0 改成 Hello Makepad
Increment 改成 点我一下

只改这两个地方，然后再跑一遍。

这办法很笨，但确实有用。因为你会立刻知道，自己改的是哪一层，界面上看到的又是哪一层。

3.3 按钮为什么能点

当前官方示例里，点击逻辑大意是这样的：

rust 复制代码

if self.ui.button(cx, ids!(increment_button)).clicked(actions) {
    // 更新状态
    // 重新渲染
}

这段代码意思不复杂：

先拿到那个按钮
判断它这次事件里有没有被点击
如果点了，就更新状态
更新后让界面重新刷新

这也是 Makepad 入门时很关键的一点。它不是只负责"画个界面"，界面、事件、状态本来就是一起看的。

所以你第一次理解按钮点击时，不要只盯着 Button { text: ... }。

按钮真正"活起来"，是在事件处理那一段。

4. 第一次看目录，先只认这几层

很多人看到 Makepad 仓库目录会有点头大，这很正常。

因为它不是一个"只放几个 demo"的小仓库，本身就带着 runtime、widgets、tools、studio 这些东西。

新手第一轮不要全看，先认下面这几层就够了：

examples/：你当前最该看的地方，先跑示例
widgets/：常用控件和 UI 基础能力
studio/：官方主入口，偏工具链和迭代环境
tools/：构建脚手架、平台工具和辅助脚本

如果只看 examples/counter 这个最小例子，那你真正需要先盯住的，其实只有：

Cargo.toml
src/main.rs
tests/（第一轮可以先不管）

所以第一次别想着"把整个 Makepad 仓库都看懂"。没这个必要，只会给自己加压。

5. 新手最容易卡住的，不是代码，而是预期

很多人第一次上手 Makepad，会默认拿它和 Tauri 对比，然后心里嘀咕一句：

怎么没有那种前端项目一把梭的熟悉感？

这很正常。

因为 Makepad 本来就不是 WebView 路线。

它从一开始就更像是：Rust 自己来做 UI 主场。

这样做的好处是，窗口、控件、事件、状态会更统一。

代价也很直接：

你要接受一套不那么像 Web 的组织方式
你第一次看语法时，确实会觉得有点陌生
旧资料和新示例之间还有一点代际差异

所以我的建议一直一样：先别追求"全懂"，先追求"跑通"。

窗口能打开，文字能改，按钮能点，就已经过了最难受的那道坎。

很多时候，0 到 1 过去了，后面反而顺。

6. 如果你非要开始自己的第一个项目，我建议这样做

这里我不打算给什么"标准脚手架大法"，因为截至 2026 年 6 月 6 日，官方最稳、最直接的上手方式，还是围绕仓库示例来学。

所以更稳的做法不是凭空新建，而是：

先跑 makepad-example-counter
改文字、改窗口大小、改按钮文案
再把这个示例当成你的最小起点去复制

为什么不建议一上来空手写？因为新手阶段你最缺的不是写代码的能力，而是确认"这版 Makepad 现在到底是不是这么写"。

官方 example 最大的价值就在这儿。它未必是最漂亮的代码，但大概率是当前最不容易把你带偏的代码。

总结

这一期其实只做了一件小事：把第一个 Makepad 窗口跑起来。

但这件事很关键，因为它会把 Makepad 从"我看过这个名字"，变成"我本地已经弹出过界面了"。

如果你现在刚开始接触 Makepad，我特别建议你按这篇文章的顺序来：

先跑官方 counter 示例
先改按钮和文字
先理解窗口、布局、点击这 3 个点

这一步稳了，再去啃更深的 UI 语法、组件结构、状态管理，压力会小很多。

下一期我准备接着拆一个很多人都会卡住的问题：

Makepad 的 UI 代码到底怎么读，尤其是新示例里的 script_mod! / Splash，和你在旧文章里见到的 live_design! 到底是什么关系。

如果你也在试 Makepad，欢迎把你卡住的第一步留在评论区。很多人卡住的地方，其实都差不多。