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