企业官网建设流程全解析

egui 快速上手：从 0 到跑通第一个 Rust GUI 的完整指南

【免费下载链接】eguiegui: an easy-to-use immediate mode GUI in Rust that runs on both web and native项目地址: https://gitcode.com/GitHub_Trending/eg/egui

egui 是一个用 Rust 编写的即时模式（Immediate Mode）GUI 库，即"每帧重建整个界面"的渲染方式，解决"写一套代码，桌面和浏览器都能跑"的问题。当前版本 0.36.1，最小示例只要 33 行。

一分钟看懂全貌

egui 的定位是极简的跨平台 GUI：核心egui负责布局和交互，eframe负责窗口、输入和渲染入口，同一套 UI 代码在桌面和 Web 通用。渲染后端可选 OpenGL（glow）或 WebGPU（wgpu），对你是透明的。

跑起来的最短路径

克隆仓库（当前仓库版本 0.36.1）：

git clone https://gitcode.com/GitHub_Trending/eg/egui

仓库自带 示例目录，最短的是hello_world_simple：没有 struct，逻辑全在 33 行里。直接运行：

cargo run -p hello_world_simple

你会看到一个 320×240 的窗口，一个输入框、一个滑块和一个按钮。核心代码长这样（完整可运行版本在 hello_world_simple/src/main.rs）：

use eframe::egui; fn main() -> eframe::Result { let options = eframe::NativeOptions { viewport: egui::ViewportBuilder::default().with_inner_size([320.0, 240.0]), ..Default::default() }; let mut age = 42; eframe::run_ui_native("My egui App", options, move |ui, _frame| { egui::CentralPanel::default().show(ui, |ui| { ui.heading("My egui Application"); ui.add(egui::Slider::new(&mut age, 0..=120).text("age")); if ui.button("Increment").clicked() { age += 1; } ui.label(format!("age: {age}")); }); }) }

先搞懂这几个核心概念

1. 即时模式：UI 不持久存在。每帧你调用一次ui闭包，从上到下重新声明界面。好处是没有"数据改了控件不刷新"这类问题——数据变了，下一帧自然画出来。
2. eframe帮你管主循环：窗口、事件循环、渲染全由 crates/eframe/ 接管，你只写 UI 闭包。渲染后端在 native 目录 里按 glow 或 wgpu 自动选择。
3. Response是交互的返回值：ui.button("x")返回一个Response，对它调.clicked()、.hovered()就知道用户做了什么。控件即函数，这也是即时模式没有控件树的原因。

两个典型场景，看看实际效果

场景一：看全量组件长什么样。运行仓库自带的演示应用（源码在 crates/egui_demo_lib/）：

cargo run -p egui_demo_lib

它会打开一个多窗口 Demo，覆盖滑块、表格、弹窗、文本编辑等几乎所有组件，每个窗口对应一段可对照的源码。

场景二：给游戏加设置面板。典型做法就是hello_world_simple的放大版：结构体存游戏状态（音量、分辨率等），每帧在ui闭包里把状态映射成滑块和复选框，用户拖动时直接改字段。不需要任何胶水代码，因为状态本身就是唯一数据源。

避坑清单

1. 现象：中文显示成方框。→原因：默认字体在 epaint_default_fonts/fonts 里只有拉丁字符。→解决：往cc.egui_ctx的字体配置里加一个中文字体文件再set_fonts。
2. 现象：按cargo run没有窗口弹出。→原因：eframe的渲染依赖 OpenGL/WGPU，裸终端环境可能缺驱动或后端。→解决：确认桌面环境正常，或用RUST_LOG=debug cargo run -p hello_world看报错。
3. 现象：想加图片，ui.image却加载不了。→原因：egui核心不含图片解码器，加载器在egui_extras。→解决：调用egui_extras::install_image_loaders(&cc.egui_ctx)（hello_world示例里就有这一行）。
4. 现象：窗口大小和代码写的不一样。→原因：with_inner_size是初始值，用户可缩放。→解决：需要固定大小时在ViewportBuilder上追加.with_resizable(false)。
5. 现象：界面没变化时 CPU 占用高。→原因：即时模式默认每帧重绘。→解决：只在状态变化时调用ctx.request_repaint()，空闲帧eframe会自行跳过。
6. 现象：升级版本后编译报错。→原因：egui 处于 0.x，API 有破坏性变更（本仓库示例用的就是最新的eframe::App::ui签名）。→解决：以仓库内当前示例为准，别照抄旧教程代码。

继续深入

• examples/：20 多个独立小项目，从hello_world到custom_3d_glow、multiple_viewports，适合刚跑通后挨个试，10 分钟一个。
• crates/egui_demo_lib/：演示应用源码，适合想学"某个组件怎么组合出来的"时对着读。
• crates/egui/src/：核心源码，containers/、widgets/目录结构与 UI 概念一一对应，适合排查布局行为。
• docs/accessibility.md：无障碍支持说明，适合要给界面加读屏器支持时看。
• tests/egui_tests/：带截图快照的回归测试，适合想看"官方怎么断言 UI 长相"时参考。

建议第一步就克隆仓库跑cargo run -p hello_world_simple，窗口弹出来后再打开egui_demo_lib逛一圈。egui 的上手曲线就藏在这两个命令里。

【免费下载链接】eguiegui: an easy-to-use immediate mode GUI in Rust that runs on both web and native项目地址: https://gitcode.com/GitHub_Trending/eg/egui