GPUI Component：因为桌面应用不该让你哭泣
Source: Dev.to
什么让 GPUI Component 与众不同？
GPUI Component 基于 GPUI——Zed 的 UI 框架，也就是那个超快的代码编辑器。使用 GPUI Component 构建的应用通常比同等的 Electron 应用 节省 60–80 % 的内存，同时仍能保持 120 fps 的动画。
它是基于 Rust 的，所以你可以获得：
- 让开发者感动落泪的性能——原生编译意味着你的应用真正使用计算机硬件。
- 一次代码库跨 Windows、macOS、Linux——一次编写，处处编译。
- 60+ 组件——按钮、模态框、提示框、数据表格、日期选择器等。
- 类似 React 的状态管理——无需手动操作 DOM。
入门：比你想的更简单
在 Cargo.toml 中添加两行：
gpui-component = "0.2"
gpui = "0.2"下面是一个完整的 “Hello, World!” 示例，它真的会做点事：
use gpui::*;
use gpui_component::{button::*, *};
pub struct HelloWorld {
label_text: SharedString,
}
impl Render for HelloWorld {
fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {
let view = cx.entity().clone();
div()
.v_flex()
.gap_2()
.size_full()
.items_center()
.justify_center()
.child(Label::new(&self.label_text).text_align(TextAlign::Center))
.child(
Button::new("ok")
.primary()
.label("Click Me!")
.on_click(move |_, _, cx| {
view.update(cx, |this, inner_cx| {
this.label_text = "Button clicked!".into();
inner_cx.notify();
});
}),
)
}
}
fn main() {
let app = Application::new();
app.run(move |cx| {
gpui_component::init(cx);
cx.spawn(async move |cx| {
cx.open_window(WindowOptions::default(), |window, cx| {
let view = cx.new(|_| HelloWorld {
label_text: "Hello, World!".into(),
});
cx.new(|cx| Root::new(view.into(), window, cx))
})?;
Ok::(())
})
.detach();
});
}运行 cargo run，boom——你拥有了一个桌面应用。没有 webpack 配置。没有 node_modules 文件夹。
状态到底是怎么工作的（不需要博士学位）
如果你用过 React，这里会很熟悉。如果没有，准备迎接启示吧。
状态存放在你的组件结构体中——就是普通的 Rust 字段：
pub struct HelloWorld {
label_text: SharedString, // 这就是你的状态
}更新状态遵循一个简单模式：
- 在渲染方法中 捕获视图：
let view = cx.entity().clone(); - 当某件事发生时 更新：
view.update(cx, |component, cx| { … }) - 触发重新渲染：
cx.notify();
就这么简单。改变状态，调用 notify，UI 就会更新。无需手动操作 DOM，无需 useState Hook，无需凌晨 2 点的调试。
组件：你新的好伙伴
GPUI Component 附带 60+ 组件，包括：
- 按钮——主按钮、次按钮、幽灵按钮等。
- 模态框 & 抽屉——礼貌的中断。
- 数据表格——排序、过滤、分页，哭都不需要。
- 日期选择器——每个开发者的噩梦，已经帮你搞定。
- 提示框——悬停提示，真的好用。
- 表单——输入框、复选框、下拉框，全部已样式化并可直接使用。
- 导航——标签页、面包屑、菜单，使用时不会和你作对。
全部主题化、全部可自定义、全部文档化于 。
FAQ：你可能会问的问题
这能用于生产环境，还是“周末项目”级别？
它已经在生产应用中活跃使用。API 稳定（0.2 版是诚实的版本号，而不是警告）。
我需要是 Rust 大师吗？
掌握基础 Rust 有帮助，但只要能看懂示例代码而不大喊大叫，就足够了。组件的使用模式比借用检查器听起来要简单得多。
样式和主题怎么办？
内置主题系统，颜色、间距、组件都可以自定义。无需 CSS。
能用它构建复杂应用吗？
能。数据表格、表单、多窗口、系统托盘集成——应有尽有。查看文档中的示例，从简单到 “等等，你真的做到这了？”。
Windows/macOS/Linux 的兼容性如何？
GPUI 处理平台差异。一次编写，处处运行。我们在 50+ 台开发机器上测试，跨平台构建始终如一，无需平台特定代码。
如果卡住了怎么办？
文档非常完整，每个组件都有示例，还有日益壮大的开发者社区。
比 Electron 更快吗？
用户的笔记本风扇会感谢你的。原生编译带来原生性能——没有 JavaScript 解释器，没有 Chromium 开销。
为什么你应该在意
桌面应用正卷土重来。人们已经厌倦了那种卡顿且占用大量内存的 Web 应用。他们想要 感觉 原生的应用，因为它们 真的原生。
GPUI Component 为你提供了构建这些应用的工具，省去以往的痛苦。你得到现代的开发体验（类似 React 的模式），现代的性能（原生速度），以及现代的部署方式（单一可执行文件）。不再需要在 “易于构建” 与 “运行不卡” 之间做抉择。两者兼得。
立即上手
- 创建一个新的 Rust 项目：
cargo new my-awesome-app - 按上面示例把 GPUI Component 加入
Cargo.toml。 - 复制示例代码。
- 运行
cargo run。
感受一下你的应用在毫秒级启动时的冲击感。
完整文档与更多示例请见 。