＜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中添加菜单栏的简单实现，后面会有专门的势力来集合部件的应用，请专注后续的实例专栏。