＜Rust＞egui学习之小部件（十）：如何在窗口中添加复选框checkbox部件？

机构师

于 2024-09-06 11:14:20 发布

阅读量699

点赞数 18

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

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

版权

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

11 篇文章 0 订阅

订阅专栏

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

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

概述
本文是本专栏的第十篇博文，主要讲述复选框checkbox部件的使用。

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

部件属性

在egui中，checkbox提供一个可选择项，其属性如下：

pub struct Checkbox<'a> { 
    checked: &'a mut bool,
    text: WidgetText,
    indeterminate: bool,
}

可以看见其可设置属性很少，来看下，checked顾名思义，表示复选框是否被选中的状态，是个bool量，选中即为true，未选中即false。
第二个是text，是复选框的名字，通常我们添加选项时，肯定都有一个名称的，比如是颜色、名称、年龄、日期等不同的元素。
而indeterminate的含义是不确定状态，官方解释是：

Display an indeterminate state (neither checked nor unchecked)

表示即没有选中，也没有未选中，处于一种未操作的状态。但通常我们可能不一定用到这种状态，可以不设置。

我们来看一下实际代码：

ui.checkbox(&mut self.checkflag, "红色");

其中，checkflag是我们创建的bool变量：

checkflag:bool,

看下复选框部件的显示效果：
在这里插入图片描述
但是目前选中或者不选中，我们没有对其选择状态进行处理。现在我们根据其选择状态，来改变其文字颜色，即选中时，文字变为红色，未选中则是灰色：

let cctt=RichText::new("红色").background_color(self.cccolor);      
            ui.checkbox(&mut self.checkflag, cctt);  
            if self.checkflag{
                self.cccolor= Color32::RED;
            }else{
                self.cccolor=Color32::LIGHT_GRAY;
            }

我们修改了代码，将复选框的text改为richtext部件，因此可以设置其背景色，背景色的值，是一个变量，我们通过监控复选框的状态来设定不同的颜色值，即可实现。
在这里插入图片描述

当然，我们也可以对复选框进行组合，比如，我们设置三个颜色，红绿蓝rgb三色，根据选择的颜色进行组合，输出混合后的颜色，即rgb颜色：

 let cctt=RichText::new("当前颜色").background_color(self.cccolor);   
            ui.checkbox(&mut self.checkflag, "红色");  
            ui.checkbox(&mut self.checkflag2, "蓝色");
            ui.checkbox(&mut self.checkflag3, "绿色");
            let cc=(self.checkflag as u8) <<2 | (self.checkflag2 as u8) <<1 | (self.checkflag3 as u8);
            match cc{
                0b000=>self.cccolor=Color32::LIGHT_GRAY,
                0b001=>self.cccolor=Color32::GREEN,
                0b010=>self.cccolor=Color32::BLUE,
                0b011=>self.cccolor=Color32::from_rgb(0, 255, 255),
                0b100=>self.cccolor=Color32::RED,
                0b101=>self.cccolor=Color32::from_rgb(255, 255, 0),
                0b110=>self.cccolor=Color32::from_rgb(255,0,255),
                0b111=>self.cccolor=Color32::WHITE,
                _=>self.cccolor=Color32::BLACK,


            }
            ui.label(cctt);