RustGUI学习(iced)之小部件(四):如何使用单选框radio部件?

前言
本专栏是学习Rust的GUI库iced的合集,将介绍iced涉及的各个小部件分别介绍,最后会汇总为一个总的程序。
iced是RustGUI中比较强大的一个,目前处于发展中(即版本可能会改变),本专栏基于版本0.12.1.

概述
这是本专栏的第四篇,主要讲述单选框按钮radio部件的使用,会结合实例来说明。
系列博客链接
1、RustGUI学习(iced)之小部件(一):如何使用按钮和文本标签部件
2、RustGUI学习(iced)之小部件(二):如何使用滑动条部件
3、RustGUI学习(iced)之小部件(三):如何使用下拉列表pick_list?

环境配置:
系统:windows
平台:visual studio code
语言:rust
库:iced

在这里插入图片描述
注:iced是一个受Elm启发而编写,适用于rust语言的跨平台的GUI库。

本篇内容:
1、radio

单选框部件

单选框部件radio在iced中的定义如下:

/// Creates a new [`Radio`].       
///
/// [`Radio`]: crate::Radio
pub fn radio<Message, Theme, Renderer, V>(label: impl Into<String>,value: V,selected: Option<V>,on_click: impl FnOnce(V) -> Message,
) -> Radio<Message, Theme, Renderer>
whereMessage: Clone,Theme: radio::StyleSheet,Renderer: core::text::Renderer,V: Copy + Eq,
{Radio::new(label, value, selected, on_click)
}

其由Radio来创建:

#[allow(missing_debug_implementations)]
pub struct Radio<Message, Theme = crate::Theme, Renderer = crate::Renderer>    
whereTheme: StyleSheet,Renderer: text::Renderer,
{is_selected: bool,on_click: Message,label: String,width: Length,size: f32,spacing: f32,text_size: Option<Pixels>,text_line_height: text::LineHeight,text_shaping: text::Shaping,font: Option<Renderer::Font>,style: Theme::Style,
}

我们来看一下radio部件的参数和属性,其中项width、text_size之类的属性我们将不再赘述,主要看一下radio部件主要的参数:
1、label是字符类型,表示单选框的名称,
2、is_selected:布尔量,它是一个比较结果:

is_selected: Some(value) == selected,  

其中value是当前radio的预设值,将其与实时值比较,以判定当前radio是否被选中。
3、on_click:用于监听radio是否被选中,若选中,则触发消息。其反馈值包含当前选中的是哪个radio值。
简单的说一下外观样式的自定义:
和之前所说的部件类似,radio部件如果要自定义样式,需要先创建自定义结构体样式:

//自定义radio样式1
struct MyRadioStyle;

然后实现StyleSheet:

impl radio::StyleSheet for MyRadioStyle {    type Style =  Theme;fn active(&self, style: &Self::Style, is_selected: bool) -> radio::Appearance {radio::Appearance { background: Background::Color(Color::from_rgb8(180, 184, 248)), dot_color: Color::from_rgb8(252, 29, 29), border_width:1.0, border_color: Color::BLACK, text_color:Some(Color::BLACK),}}fn hovered(&self, style: &Self::Style, is_selected: bool) -> radio::Appearance {radio::Appearance { background: Background::Color(Color::from_rgb8(126, 241, 132)), dot_color: Color::from_rgb8(252, 29, 29), border_width: 1.0, border_color: Color::BLACK, text_color: Some(Color::BLACK),}}
}

其效果如下:
在这里插入图片描述

下面来看一下实际使用,一般来说,单选框至少是成对出现,否则单选框就失去了意义。本例中我们假设有4个单选框为1组,我们先创建一个枚举如下:

#[derive(Debug,Clone,Copy,PartialEq,Eq)]
pub enum Choise{  A,B,C,All,
}

这个Choise枚举包含A、B、C、All四个选项,将会分别对应四个单选框。
然后我们在Message枚举中添加一个项:

RadioChose(Choise),   

RadioChose消息的内部参数是Choise枚举。
因为radio的参数中还有一个selected值,其定义为:

selected: Option<V>,

所以,我们在结构体中新建变量:

select_choise:Option<Choise>,

新变量select_choise是一个枚举类型,参数是Choise枚举。

然后我们将创建4个radio部件:

radio("A", Choise::A, self.select_choise, Message::RadioChose).width(6).size(15).spacing(4),  radio("B",Choise::B, self.select_choise, Message::RadioChose).width(6).size(15).spacing(4),radio("C",Choise::C, self.select_choise, Message::RadioChose).width(6).size(15).spacing(4),radio("All",Choise::All, self.select_choise, Message::RadioChose).width(6).size(15).spacing(4),

可以看到其格式都是相同的,我们选取其中一个来做说明。

radio("A", Choise::A, self.select_choise, Message::RadioChose).width(6).size(15).spacing(4), 

如上代码,其中字符串“A”表示radio的名称,即label属性。
而Choise::A对应的是value属性,即当前radio的值。
而select_choise则表示实时值,它会根据所选择的不同radio来改变,其改变逻辑在update函数中实现。
最后,Message::RadioChose表示消息触发。
当我们选择4个单选框中的任何一个时,都会触发消息Message,Message会反馈当前选择的radio值,我们在update中处理这个值:

Message::RadioChose(choise)=>{self.select_choise=Some(choise);}

即将触发产生的radio实时值传递给select_choise,这样UI就会更新当前radio选中项。
在这里插入图片描述
以上就是单选框部件radio的使用介绍,相对来说,radio的使用比较简单,我们来看一下动态演示:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/5065.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python量化炒股的获取数据函数—get_concept()

查询股票所属的概念板块函数get_concept()&#xff0c;利用该函数可以查询一只或多只股票所属的概念板块&#xff0c;其语法格式如下&#xff1a; get_concept(security, dateNone)security&#xff1a;标的代码。类型为字符串&#xff0c;形式如‘000001.XSHE’&#xff0c;或…

k8s安装nginx Ingress超详细指南

在本全面的 Ingress 指南中&#xff0c;您将学习如何在 Kubernetes 上设置 Nginx Ingress控制器并使用 DNS 配置 Ingress。 目前有两种 Nginx Ingress 控制器。 kubernetes 社区的 Nginx Ingress 控制器Nginx Inc 开发的 Nginx Ingress 控制器 我们将使用 Kubernetes 社区 N…

养老金融:编织中国老龄社会的金色安全网

在科技金融、绿色金融、普惠金融、养老金融、数字金融这“五篇大文章”中&#xff0c;养老金融以其独特的社会价值和深远影响&#xff0c;占据着不可或缺的地位。十三届全国政协经济委员会委员、原中国保监会副主席周延礼先生近期在多个场合的发言&#xff0c;不仅凸显了养老金…

⑦ - 产品经理通识指南

📖 该文隶属 程序员:职场关键角色通识宝典✍️ 作者:哈哥撩编程(视频号同名) 博客专家全国博客之星第四名超级个体COC上海社区主理人特约讲师谷歌亚马逊演讲嘉宾科技博主极星会首批签约作者🏆 推荐专栏: 🏅 程序员:职场关键角色通识宝典🏅

【成长篇】Java程序员的自我突破

Java程序员的自我突破 在快速发展的IT行业中,Java程序员作为其中的一支重要力量,面临着不断变化的技术环境、激烈的竞争压力以及日益增长的工作要求。为了在这个行业中立足并取得成功,Java程序员需要不断地进行自我突破,提升自己的能力和价值。本文将从多个方面探讨Java程…

使用QT完成如图的游戏登录界面 使用信号和槽完成密文明文密码转换,重置账号和密码,登录校验 详细代码在主页下载

头文件: #ifndef LOGINWIDGET_H #define LOGINWIDGET_H #include <QLineEdit> #include <QPushButton> #include <QWidget> class LoginWidget : public QWidget {Q_OBJECT public: LoginWidget(QWidget *parent = 0); ~LoginWidget(); public slots: …

C++11 设计模式6. 建造者模式,也叫做生成器模式

一 什么是建造者模式&#xff1f; 建造者模式&#xff08;也被成为⽣成器模式&#xff09;&#xff0c;是⼀种创建型设计模式&#xff0c;软件开发过程中有的时候需要创建很复杂的对象&#xff0c;⽽建造者模式的主要思想是将对象的构建过程分为多个步骤&#xff0c;并为每个步…

【银角大王——Django课程——用户表的基本操作】

Django课程——用户表的基本操作 模板的继承用户管理用户列表展示新建用户Django组件原始方法【麻烦&#xff0c;太原始】form组件modelform组件 使用modelsform组件编写添加页面 模板的继承 &#xff08;1&#xff09;先写一个页面模板————这个案例中的模板基本上就是一个…

2024-04-29 区块链-项目-记录

摘要: 2024-04-29 区块链-项目-记录 区块链项目记录: (1) C 比特币(BTC) github&#xff1a; https://github.com/bitcoin/bitcoin 莱特币(LTC) github&#xff1a; https://github.com/litecoin-project/litecore-litecoin 瑞波币(XRP) github&#xff1a; https://gi…

JAVA基础——集合框架(List与Set)

数据结构 什么是数据结构 数据结构就是用来装数据以及数据与之间关系的一种集合。如何把相关联的数据存储到计算机&#xff0c;为后续的分析提供有效的数据源&#xff0c;是数据结构产生的由来。数据结构就是计算机存储、组织数据的方式。好的数据结构&#xff0c;让我们做起事…

docker学习笔记8:centos docker安装redis

在 CentOS 上使用 Docker 安装 Redis 的步骤相对直接,下面是详细的操作指南: 1. 确保 Docker 已安装 首先,确保你的 CentOS 系统上已经安装并启动了 Docker。可以通过以下命令来检查 Docker 服务的状态: sudo systemctl status docker如果 Docker 未安装,你可以按照以下…

【统计推断】-01 抽样原理之(三)

文章目录 一、说明二、抽样分布三 均值抽样分布3.1 有限母体无放回抽样3.2 有限母体有放回抽样3.3 无限母体 四、比例抽样分布五、和差抽样分布 一、说明 上文中叙述母体和抽样的设计&#xff1b;以及抽样分布的概念&#xff0c;本篇将这种关系定量化&#xff0c;专门针对抽样的…

练习题(2024/4/29)

在深度优先遍历中&#xff1a;有三个顺序&#xff0c;前中后序遍历 这里前中后&#xff0c;其实指的就是中间节点的遍历顺序&#xff0c;只要记住 前中后序指的就是中间节点的位置就可以了。 如图 1二叉树的前序遍历 给你二叉树的根节点 root &#xff0c;返回它节点值的 前…

Linux学习之Tcp与Udp

目录 UDP Udp协议的格式 UDP的传输特性 UDP的缓冲区 基于UDP的应用层协议 TCP协议 TCP的报文格式 1.ACK确认应答机制 2.超时重传 3.TCP的链接管理机制 为什么要三次握手呢&#xff1f; 理解TIME_WAIT状态 流量控制&#xff08;可靠性效率&#xff09; 滑动窗口 拥塞…

CTFHub-Web-SSRF

CTFHub-Web-SSRF-WP 一、内网访问 1.题目提示说访问127.0.0.1的flag.php&#xff0c;在URL后面添加路径没想到直接访问成功 二、伪协议读取文件 1.题目提示说访问Web目录下的flag.php&#xff0c;联想到Web目录一般存放于/var/www/html/里&#xff0c;去修改URL尝试进行访问…

stm32f103c8t6学习笔记(学习B站up江科大自化协)-UNIX时间戳、BKPRTC

UNIX时间戳 UNIX时间戳最早是在UNIX系统使用的&#xff0c;所以叫做UNIX时间戳&#xff0c;之后很多由UNIX演变而来的系统也继承了UNIX时间戳的规定&#xff0c;目前linux&#xff0c;windows&#xff0c;安卓这些操作系统的底层计时系统都是用UNIX时间戳 时间戳这个计时系统和…

Java对接高德api搜索POI 2.0 关键字搜索

目录 一、注册账号 二、搜索小demo 1.首先要引入依赖 2. 然后查看打印结果即可 三、搜索接口代码 1.引入依赖 2.yml配置 2.Controller 3.静态工具类 四、运行测试 一、注册账号 高德开放平台 | 高德地图API 注册高德开发者&#xff1b;去控制台创建应用&#xff…

Arco design 发布到生成环境F5刷新报错404

问题&#xff1a;开发环境没问题&#xff0c;生成环境正常跳转也没问题但是F5刷新报错 解决办法一&#xff1a;修改 history: createWebHistory(), 改为history: createWebHashHistory(),

在Ubuntu linux操作系统上操作MySQL数据库常用的命令

检查是否安装了MySQL&#xff0c;或检查MySQL的状态&#xff1a; sudo systemctl status mysql或 sudo systemctl status mysql.service如果mysql有安装&#xff0c;上面这条命令会返回mysql的状态active或inactive。 卸载mysql数据库 第一步是停了数据库&#xff1a; sud…

MyBatis 插件介绍及应用

MyBatis 插件介绍及应用 MyBatis 是一个持久层框架&#xff0c;它允许开发者自定义 SQL 语句并将其映射到 Java 对象中。MyBatis 提供了一种灵活的数据库操作方式&#xff0c;但随着项目的复杂度增加&#xff0c;一些通用功能如分页、缓存、事务管理等可能需要重复编写。为了解…