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

前言

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

环境配置

系统：windows

平台：visual studio code

语言：rust

库：egui、eframe

概述

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

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

系列博客链接：

1、＜Rust＞egui学习之小部件（一）：如何在窗口及部件显示中文字符？

2、＜Rust＞egui学习之小部件（二）：如何在egui窗口中添加按钮button以及标签label部件？

3、＜Rust＞egui学习之小部件（三）：如何为窗口UI元件设置布局（间隔、水平、垂直排列）？

4、＜Rust＞egui学习之小部件（四）：如何在窗口中添加滚动条Scroll部件？

5、＜Rust＞egui学习之小部件（五）：如何在窗口中添加图像部件？

6、＜Rust＞egui学习之小部件（六）：如何在窗口中添加菜单栏部件？

7、＜Rust＞egui学习之小部件（七）：如何在窗口中添加颜色选择器colorpicker部件？

8、＜Rust＞egui学习之小部件（八）：如何在窗口中添加滑动条slider部件？

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

部件属性

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

rust 复制代码

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)

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

我们来看一下实际代码：

rust 复制代码

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

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

rust 复制代码

checkflag:bool,

看下复选框部件的显示效果：

但是目前选中或者不选中，我们没有对其选择状态进行处理。现在我们根据其选择状态，来改变其文字颜色，即选中时，文字变为红色，未选中则是灰色：

rust 复制代码

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颜色：

rust 复制代码

 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);

看一下演示：

以上是egui中关于复选框checkbox的简单应用。