当前位置：首页 > news >正文

＜Rust＞egui学习之小部件（六）：如何在窗口中添加菜单栏部件？

news 来源：原创 2024/9/19 7:26:28

前言
本专栏是关于Rust的GUI库egui的部件讲解及应用实例分析，主要讲解egui的源代码、部件属性、如何应用。

环境配置
系统：windows
平台：visual studio code
语言：rust
库：egui、eframe

概述
本文是本专栏的第六篇博文，主要讲述如何在窗口中添加菜单部件的使用。

事实上，类似于iced，egui都提供了示例程序，本专栏的博文都是建立在官方示例程序以及源代码的基础上，进行的实例讲解。
即，本专栏的文章并非只是简单的翻译egui的官方示例与文档，而是针对于官方代码进行的实际使用，会在官方的代码上进行修改，包括解决一些问题。

系列博客链接：
1、＜Rust＞egui学习之小部件（一）：如何在窗口及部件显示中文字符？
2、＜Rust＞egui学习之小部件（二）：如何在egui窗口中添加按钮button以及标签label部件？
3、＜Rust＞egui学习之小部件（三）：如何为窗口UI元件设置布局（间隔、水平、垂直排列）？
4、＜Rust＞egui学习之小部件（四）：如何在窗口中添加滑动条部件？
5、＜Rust＞egui学习之小部件（五）：如何在窗口中添加图像部件？

部件属性

在egui中添加菜单，使用menu_button来实现。
官方定义：

 pub fn menu_button<R>(       &mut self,title: impl Into<WidgetText>,add_contents: impl FnOnce(&mut Ui) -> R,) -> InnerResponse<Option<R>> {if let Some(menu_state) = self.menu_state.clone() {menu::submenu_button(self, menu_state, title, add_contents)} else {menu::menu_button(self, title, add_contents)}}

官方给了使用的例子：

 egui::__run_test_ui(|ui| {                                         ui.menu_button("My menu", |ui| { ui.menu_button("My sub-menu", |ui| { if ui.button("Close the menu").clicked() { ui.close_menu(); }});});});

我们先来看一下简单的样式：

   ui.menu_button("文件", |ui|{ if ui.button("打开").clicked(){ }if ui.button("关闭").clicked(){ }});

在这里插入图片描述
再看一下嵌套子菜单的样式：

 ui.menu_button("文件", |ui|{if ui.button("打开").clicked(){}if ui.button("关闭").clicked(){}ui.menu_button("其他", |ui|{if ui.button("导入").clicked(){}if ui.button("导出").clicked(){}})});

在这里插入图片描述
没什么问题，我们尝试设置一下按钮的样式：

ui.menu_button(RichText::new("文件") .background_color(Color32::from_rgb(0, 255, 244)), |ui|{ui.set_width(100.0);ui.set_max_height(200.0);ui.add_space(10.0);if ui.button(RichText::new("打开").background_color(Color32::from_rgb(0, 255, 200))).clicked(){}if ui.button("关闭").clicked(){}ui.menu_button("其他", |ui|{if ui.button("导入").clicked(){}if ui.button("导出").clicked(){}})});

在这里插入图片描述
以上就是菜单部件的一些应用，可以看到，虽然简单，但是以上只是一组菜单按钮的编写，如果菜单栏比较多，那么程序会比较长，所以，我们希望能将这些菜单的布局写在一个单独的mod里。

菜单布局封装

事实上很简单，就是新建一个单独的文件，将菜单的布局都写在此文件里，然后在main程序里调用此mod即可。

我们新建一个文件menu_ui.rs，在里面新建一个函数：

pub fn menucreate(ui:&mut Ui,ma:&mut MyApp)-> InnerResponse<Option<()>>{  //文件菜单ui.menu_button("文件", |ui|{if ui.button("新建").clicked(){};if ui.button("打开").clicked(){if let Some(path) = FileDialog::new().pick_file() {ma.pickedpath = path.display().to_string();}ui.close_menu()};if ui.button("保存").clicked(){};if ui.button("退出").clicked(){ui.close_menu();ui.ctx().send_viewport_cmd(egui::ViewportCommand::Close); }}); //选项菜单ui.menu_button("选项", |ui|{if ui.button("选项1").clicked(){}});//设置菜单ui.menu_button("设置", |ui|{if ui.button("设置").clicked(){}let imgfile=egui::include_image!("../icons/btn_img1.png");if ui.add(Button::image_and_text(egui::Image::new(imgfile), "保存")).clicked(){}});//工具菜单ui.menu_button("工具", |ui|{if ui.button("工具").clicked(){}});//帮助菜单ui.menu_button("帮助", |ui|{if ui.button("关于").clicked(){ui.close_menu();MessageDialog::new().set_title("提示").set_description("这是基于egui的测试软件，编程语言是rust").set_buttons(rfd::MessageButtons::Ok).set_level(rfd::MessageLevel::Info).show();}if ui.button("此软件").clicked(){ui.close_menu();                      }})}

然后我们在main程序里导入：

mod menu_ui;

调用函数：

  ui.horizontal(|ui|{menu_ui::menucreate(ui,self);      });

此处使用水平布局，因为默认是垂直布局。
看一下效果：
在这里插入图片描述
可以看到，菜单栏是正常显示的，这样一来，我们就可以在单独的mod里编写菜单项，而不会是main程序变得非常冗长了。
由于egui的按钮也支持图片，所以我们为菜单的按钮添加图片看看：

//设置菜单ui.menu_button("设置", |ui|{if ui.button("设置").clicked(){}let imgfile=egui::include_image!("../icons/btn_img1.png");if ui.add(Button::image_and_text(egui::Image::new(imgfile), "保存")).clicked(){}});