这是 egui 最简单的入门示例展示了基本的 UI 控件Label、TextEdit、Slider、Button和图片显示。 文件结构hello_world/ ├── Cargo.toml # 项目依赖配置 ├── src/ │ └── main.rs # 主程序代码 └── screenshot.png # 运行截图 Cargo.toml 详解[package] name hello_world # 项目名称 version 0.1.0 # 版本号 authors [Emil Ernerfeldt emil.ernerfeldtgmail.com] # 作者egui 作者 license MIT OR Apache-2.0 # 双许可证 edition 2024 # Rust 2024 版次 rust-version 1.92 # 最低 Rust 版本要求 publish false # 不发布到 crates.io [lints] workspace true # 继承工作区的 lint 配置 [dependencies] # eframe 主依赖使用工作区配置启用 __screenshot 功能用于截图 eframe { workspace true, features [ default, __screenshot, # 可通过 EFRAME_SCREENSHOT_TO 环境变量输出截图 ] } # 图片支持扩展库 egui_extras { workspace true, features [default, image] } # 日志库支持彩色输出和时间戳 env_logger { workspace true, features [auto-color, humantime] }关键点解析依赖作用eframe应用框架提供窗口、事件循环和渲染eframe/__screenshot特殊功能运行时设置EFRAME_SCREENSHOT_TOpath.png可保存截图egui_extras扩展功能这里启用image功能加载图片env_logger日志输出通过RUST_LOGdebug控制日志级别 main.rs 逐行解析1. 文件头属性#![cfg_attr(not(debug_assertions), windows_subsystem windows)]#![expect(rustdoc::missing_crate_level_docs)]属性说明#![cfg_attr(not(debug_assertions), windows_subsystem windows)]发布模式--release下在 Windows 隐藏控制台窗口只显示 GUI 窗口#![expect(rustdoc::missing_crate_level_docs)]允许缺少 crate 级别文档因为是示例2. 引入依赖useeframe::egui;// 通过 eframe 重新导出使用 egui3. main 函数fnmain()-eframe::Result{// 初始化日志系统可以通过 RUST_LOGdebug 查看详细日志env_logger::init();// 配置窗口选项letoptionseframe::NativeOptions{// viewport 字段设置窗口大小 320x240viewport:egui::ViewportBuilder::default().with_inner_size([320.0,240.0]),..Default::default()// 其余使用默认值};// 运行应用eframe::run_native(My egui App,// 窗口标题options,// 窗口配置Box::new(|cc|{// 应用创建闭包// 安装图片加载器支持显示图片egui_extras::install_image_loaders(cc.egui_ctx);// 返回默认的 MyApp 实例Ok(Box::MyApp::default())}),)}4. 应用状态结构体structMyApp{name:String,// 姓名age:u32,// 年龄}implDefaultforMyApp{fndefault()-Self{Self{name:Arthur.to_owned(),// 默认姓名age:42,// 默认年龄}}}5. 实现 eframe::App traitimpleframe::AppforMyApp{// ui 方法每帧调用绘制界面fnui(mutself,ui:mutegui::Ui,_frame:muteframe::Frame){// 创建一个中央面板带背景和边距egui::CentralPanel::default().show_inside(ui,|ui|{// 大标题ui.heading(My egui Application);// 水平布局标签 文本框ui.horizontal(|ui|{letname_labelui.label(Your name: );ui.text_edit_singleline(mutself.name).labelled_by(name_label.id);// 关联标签辅助功能});// 滑块控件绑定 age范围 0-120ui.add(egui::Slider::new(mutself.age,0..120).text(age));// 按钮点击时 age1ifui.button(Increment).clicked(){self.age1;}// 显示当前值ui.label(format!(Hello {}, age {},self.name,self.age));// 显示图片使用 include_image! 宏在编译时嵌入图片ui.image(egui::include_image!(../../../crates/egui/assets/ferris.png// 路径相对于 hello_world 示例));});}} 界面控件详解1.Label标签ui.label(Your name: );ui.heading(My egui Application);// 大标题样式2.TextEdit文本编辑框ui.text_edit_singleline(mutself.name)// 绑定到 String.labelled_by(name_label.id);// 关联标签 ID3.Slider滑块egui::Slider::new(mutself.age,0..120)// 绑定到 u32范围 0-120.text(age)// 显示文本4.Button按钮ifui.button(Increment).clicked(){// 点击检测self.age1;}5.Image图片ui.image(egui::include_image!(path/to/image.png));// include_image! 宏在编译时嵌入图片无需运行时加载 关键概念理解即时模式Immediate Mode每帧都重新构建 UI状态保存在MyApp结构体中控件通过返回值如.clicked()响应用户操作布局系统CentralPanel占据剩余空间提供默认背景horizontal水平排列子控件嵌套布局CentralPanel包含horizontal数据绑定控件直接修改应用状态mut self.name、mut self.age无需手动更新 UI框架自动重绘图片处理egui_extras::install_image_loaders初始化图片支持include_image!宏在编译时嵌入图片适合小图片图片路径相对于当前文件 运行方式# 普通运行cargo run -p hello_world# 带日志调试运行RUST_LOGdebug cargo run -p hello_world# 生成截图需要 __screenshot 功能EFRAME_SCREENSHOT_TOscreenshot.png cargo run -p hello_world 运行效果界面包含标题 “My egui Application”“Your name:” 标签 文本输入框默认 “Arthur”年龄滑块0-120默认 42“Increment” 按钮点击年龄1显示 “Hello ‘姓名’, 年龄”Ferris 螃蟹图片 一句话总结hello_world 示例展示了 egui 最核心的编程模式状态存在结构体里ui 方法每帧重新构建界面控件直接读写状态布局通过嵌套 Panel 和 horizontal 实现。