Rust GUI库 egui 的简单应用

目录

• 简介
  
• 简单示例
  
  
  
  • 创建项目
    
  • 界面设计
    
  • 切换主题
    
  • 自定义字体
    
  • 自定义图标
    
  
  
• 经典结构
  
  
  
  • 定义导航变量
    
  • 实现导航界面
    
  • 实现导航逻辑
    
  • 实现主框架结构
    
  • 调试运行
    
  
  
• 参考资料
  

简介

egui（发音为“e-gooey”）是一个简单、快速且高度可移植的 Rust 即时模式 GUI 库，跨平台、Rust原生，得当一些小工具和游戏引擎GUI：
文档：https://docs.rs/egui/latest/egui/
演示：https://www.egui.rs/#demo
github：https://github.com/emilk/egui
关于即时模式GUI，可以参考 利用C++界面框架ImGUI开发一个简单步伐 里面的介绍，ImGUI是C++的一个即时模式GUI库。

简单示例

创建项目

首先利用cargo工具快速构建项目：

1. cargo new eguitest

复制代码

然后添加依赖：

1. cargo add eframe

复制代码

egui只是一个图形库，而不是图形界面开发框架，eframe是与egui配套利用的图形框架。
为了静态插入图片，还须要增长egui_extras依赖：

1. cargo add egui_extras

复制代码

然后在Cargo.toml文件中编辑features：

1. egui_extras = { version = "0.26.2", features = ["all_loaders"] }

复制代码

界面设计

打开src/main.rc，编写第一个eframe示例步伐：

1. //隐藏Windows上的控制台窗口
2. #![windows_subsystem = "windows"]
4. use eframe::egui;
6. fn main() -> Result<(), eframe::Error> {
7.     // 创建视口选项，设置视口的内部大小为320x240像素
8.     let options = eframe::NativeOptions {
9.         viewport: egui::ViewportBuilder::default().with_inner_size([320.0, 240.0]),
10.         ..Default::default()
11.     };
13.     // 运行egui应用程序
14.     eframe::run_native(
15.         "My egui App", // 应用程序的标题
16.         options, // 视口选项
17.         Box::new(|cc| {
18.             // 为我们提供图像支持
19.             egui_extras::install_image_loaders(&cc.egui_ctx);
20.             // 创建并返回一个实现了eframe::App trait的对象
21.             Box::new(MyApp::new(cc))
22.         }),
23.     )
24. }
26. //定义 MyApp 结构体
27. struct MyApp {
28.     name: String,
29.     age: u32,
30. }
32. //MyApp 结构体 new 函数
33. impl MyApp {
34.     fn new(cc: &eframe::CreationContext<'_>) -> Self {        
35.         // 结构体赋初值
36.         Self {
37.             name: "Arthur".to_owned(),
38.             age: 42,
39.         }
40.     }
41. }
43. //实现 eframe::App trait
44. impl eframe::App for MyApp {
45.     fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
46.         // 在中央面板上显示egui界面
47.         egui::CentralPanel::default().show(ctx, |ui| {
48.             // 显示标题
49.             ui.heading("My egui Application");
50.             // 创建一个水平布局
51.             ui.horizontal(|ui| {
52.                 // 显示姓名标签
53.                 let name_label = ui.label("Your name: ");
54.                 // 显示姓名输入框（单行文本框）
55.                 ui.text_edit_singleline(&mut self.name)
56.                     .labelled_by(name_label.id); // 关联标签
57.             });
59.             // 显示年龄滑块
60.             ui.add(egui::Slider::new(&mut self.age, 0..=120).text("age"));
62.             if ui.button("Increment").clicked() {
63.                 // 点击按钮后将年龄加1
64.                 self.age += 1;
65.             }
67.             // 显示问候语
68.             ui.label(format!("Hello '{}', age {}", self.name, self.age));            
69.             // 显示图片，图片放在main.rs的同级目录下（可以自定义到其它目录）
70.             ui.image(egui::include_image!("ferris.png"));
71.         });
72.     }
73. }

复制代码

运行结果：

自定义图标

先导入image库，在终端中运行：

1. impl MyApp {
2.     // 切换主题
3.     fn theme_switcher(&mut self, ui: &mut egui::Ui, ctx: &egui::Context) {
4.         ui.horizontal(|ui| {
5.             if ui.button("Dark").clicked() {
6.                 ctx.set_visuals(egui::Visuals::dark());
7.             }
8.             if ui.button("Light").clicked() {
9.                 ctx.set_visuals(egui::Visuals::light());
10.             }
11.         });
12.     }
13. }

复制代码

还须要导入std::sync::Arc、eframe::egui::IconData ，库引入区如下：

1. egui::CentralPanel::default().show(ctx, |ui| {
2.    //...
3.    // 切换主题
4.    self.theme_switcher(ui, ctx);
5.    // 显示图片
6.    ui.image(egui::include_image!("ferris.png"));
7. });

复制代码

在main()函数中将native_options的声明改为可变变量的声明，并加入改变图标代码：

1. //自定义字体
2. fn setup_custom_fonts(ctx: &egui::Context) {
3.     // 创建一个默认的字体定义对象
4.     let mut fonts = egui::FontDefinitions::default();
6.     //安装的字体支持.ttf和.otf文件
7.     //文件放在main.rs的同级目录下（可以自定义到其它目录）
8.     fonts.font_data.insert(
9.         "my_font".to_owned(),
10.         egui::FontData::from_static(include_bytes!(
11.             "msyh.ttc"  
12.         )),
13.     );
15.     // 将字体添加到 Proportional 字体族的第一个位置
16.     fonts
17.         .families
18.         .entry(egui::FontFamily::Proportional)
19.         .or_default()
20.         .insert(0, "my_font".to_owned());
22.     // 将字体添加到 Monospace 字体族的末尾
23.     fonts
24.         .families
25.         .entry(egui::FontFamily::Monospace)
26.         .or_default()
27.         .push("my_font".to_owned());
29.     // 将加载的字体设置到 egui 的上下文中
30.     ctx.set_fonts(fonts);
31. }

复制代码

经典结构

在上面示例的基础上，实现一个上中下或左中右的经典三栏结构，main函数不须要修改，只须要修改MyApp结构体的定义即可。
定义导航变量

先定义一个导航枚举，用来在标记当前要体现的界面：

1. //...
2. impl MyApp {
3.     fn new(cc: &eframe::CreationContext<'_>) -> Self {
4.         //加载自定义字体
5.         setup_custom_fonts(&cc.egui_ctx);     
6.         //...
7.     }
8. }
9. //...

复制代码

为了方便理解示例，在 MyApp 中只定义一个 page 字段，并同步修改new函数：
[code]//定义 MyApp 结构体struct MyApp {    pageage,}//MyApp 结构体 new 函数impl MyApp {    fn new(cc: &eframe::CreationContext