＜Rust＞egui学习之小部件（六）：如何在窗口中添加菜单栏部件？
前言
本专栏是关于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(){
}
});
以上是关于egui中添加菜单栏的简单实现，后面会有专门的势力来集合部件的应用，请专注后续的实例专栏。