＜Rust＞egui学习之小部件（九）：如何在窗口中添加下拉列表combobox部件？

最新推荐文章于 2024-09-03 21:39:07 发布

机构师

最新推荐文章于 2024-09-03 21:39:07 发布

阅读量318

点赞数 5

分类专栏： RustGUI（egui）部件讲解合集文章标签： rust 学习开发语言 GUI egui

本文链接：https://blog.csdn.net/normer123456/article/details/141715250

版权

RustGUI（egui）部件讲解合集专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

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

概述
本文是本专栏的第九篇博文，主要讲述下拉列表部件combobox的使用。

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

部件属性

在egui中，下拉列表combobox部件提供下拉选项，其属性如下：

#[must_use = "You should call .show*"]
pub struct ComboBox {
    id_source: Id,
    label: Option<WidgetText>,
    selected_text: WidgetText,
    width: Option<f32>,
    height: Option<f32>,
    icon: Option<IconPainter>,
    wrap_mode: Option<TextWrapMode>,
}

事实上，下拉列表形式与菜单类似，都是点击后弹出一列元素。
我们来一下combobox的典型应用，我们以三种颜色红、黄、绿为选项：

 let id=egui::Id::new("color1");
            ComboBox::new(id,"颜色框")
                    //.icon(|ui,rect,visuals,is_open,above_or_below|setuifont::filled_triangle(ui, rect, visuals, is_open, above_or_below))
                    .selected_text(format!("{:?}",self.selected))
                    .show_ui(ui, |ui|{
                        ui.selectable_value(&mut self.selected, CC::红色,RichText::new("红色").background_color(Color32::RED));
                        ui.selectable_value(&mut self.selected, CC::绿色,RichText::new("绿色").background_color(Color32::GREEN));
                        ui.selectable_value(&mut self.selected, CC::黄色,RichText::new("黄色").background_color(Color32::YELLOW));
                    });

在这里插入图片描述
其中，文字的背景色是通过richtext元素来修改的，combobox本身不提供这些属性。
不过，我们可以修改下拉框右侧的图标，即三角形箭头，这实际上是一个绘制的矢量图形，我们可以通过icon属性来更改它：

 let id=egui::Id::new("color1");
            ComboBox::new(id,"颜色框")
                    .icon(|ui,rect,visuals,is_open,above_or_below|setuifont::filled_triangle(ui, rect, visuals, is_open, above_or_below))
                    .selected_text(format!("{:?}",self.selected))
                    .show_ui(ui, |ui|{
                        ui.selectable_value(&mut self.selected, CC::红色,RichText::new("红色").background_color(Color32::RED));
                        ui.selectable_value(&mut self.selected, CC::绿色,RichText::new("绿色").background_color(Color32::GREEN));
                        ui.selectable_value(&mut self.selected, CC::黄色,RichText::new("黄色").background_color(Color32::YELLOW));
                    });

注意，此处icon的参数是一个闭包，我们为其传入了一个函数，这个函数如下：

pub fn filled_triangle(
     ui: &egui::Ui,
     rect: egui::Rect,
     visuals: &egui::style::WidgetVisuals,
     _is_open: bool,
     _above_or_below: egui::AboveOrBelow,
 ) {
     let rect = egui::Rect::from_center_size(
         rect.center(),
            egui::vec2(rect.width() * 0.6, rect.height() * 0.4),
        );
     ui.painter().add(egui::Shape::convex_polygon(
         vec![
            rect.left_top(), 
         rect.right_top(), 
         rect.center_bottom(),
         //rect.left_bottom()
         ],
         visuals.fg_stroke.color,
            visuals.fg_stroke,
     ));
 }

上面的代码绘制出来的也是一个倒三角，但是我们可以修改其绘制路径：

 ui.painter().add(egui::Shape::convex_polygon(
         vec![
            rect.left_top(), 
         rect.right_top(), 
         rect.center_bottom(),
         rect.left_bottom()
         ],

加上一个点位，就变成了四边形：
在这里插入图片描述
combobox的参数里，我们注意到selected_text的参数是一个变量，即当我们选择不同的选项后，变量保存相应的值，对应本例中，即红色、黄色、绿色三种颜色。
而show_ui表示显示出下拉列表元素，显示的具体，则依据你写的代码来。
本例中下拉菜单中的三个元素便是如此添加的。