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

news2024/11/24 18:55:13

前言
本专栏是学习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>
where
    Message: 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>    
where
    Theme: 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.coloradmin.cn/o/1634031.html

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

相关文章

【酱浦菌-爬虫技术细节】解决学术堂爬虫翻页(下一页)问题

首先我们通过css选择器获取页码信息&#xff0c;这里的css选择器&#xff0c;选择的是含有a标签的所有li标签&#xff0c;代码如下&#xff1a; li html_web.css(div.pd_c_xslb_left_fenye ul li>a) for li in li:li_url li.css(a::attr(href)).get()li_num li.css(a::t…

基于FPGA的数字信号处理(6)--如何确定Verilog表达式的符号

前言 尽管signed语法的使用能带来很多便利&#xff0c;但同时也给表达式的符号确定带来了更多的不确定性。比如一个有符号数和一个无符号数的加法/乘法结果是有符号数还是无符号数&#xff1f;一个有符号数和一个无符号数的比较结果是有符号数还是无符号数&#xff1f;等等。接…

IOT病毒分析

前言&#xff1a; 最近审计报警日志&#xff0c;发现了一个IOT病毒&#xff0c;利用的是CVE-2023-1389漏洞扫描tplink&#xff0c;进行攻击&#xff0c;有点意思&#xff0c;拿出来分析下。 发现&#xff1a; 查看流量日志&#xff0c;发现了一个有问题的访问&#xff1a; 访…

【架构】后端项目如何分层及分层领域模型简化

文章目录 一. 如何分层1. 阿里规范2. 具体案例分析 二. 分层领域模型的转换1. 阿里规范2. 模型种类简化分析 三. 小结 本文描述后端项目中如何进行分层&#xff0c;以及分层领域模型简化 一. 如何分层 1. 阿里规范 阿里的编码规范中约束分层逻辑如下: 开放接口层&#xff1a…

CSS实现各种优惠券效果

一、左半圆效果 <style style"text/css">.coupon {width: 240px;height: 100px;margin-top: 15px;background-color: #ff6347;-webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px); } </style><div class"coupon…

摩根大通推出创新工具 FlowMind,引领金融自动化新变革

近日&#xff0c;摩根大通人工智能研究部推出了一款极具创新性的工具——FlowMind&#xff0c;为金融行业带来了全新的工作模式和效率提升。 FlowMind 能够自动化金融工作流程&#xff0c;在信贷审批、风险评估、合规监测等重要任务中发挥着关键作用。它利用 GPT 自动生成工作…

张鸣独到政治观,规矩与自信新解

张鸣独解规矩与自信&#xff0c;社政新影响揭秘。张鸣独到政治观&#xff0c;规矩与自信新解在当今社会政治的大背景下&#xff0c;学者张鸣的每一次公开演讲无疑都是一次思想的盛宴。最近&#xff0c;他就当前的社会政治问题提出了自己独特的观点&#xff0c;特别是他对规矩和…

【网络原理】UDP协议 | UDP报文格式 | 校验和 | UDP的特点 | 应用层的自定义格式

文章目录 一、UDP协议1.UDP的传输流程发送方接收方 2.UDP协议报文格式&#xff1a;长度受限校验和如何校验&#xff1a;CRC算法&#xff1a;循环冗余算法md5算法&#xff1a; 2.UDP的特点 二、开发中常见的自定义格式1.xml&#xff08;古老&#xff09;2.json&#xff08;最流行…

头歌:Spark任务提交

第1关&#xff1a;spark-submit提交 任务描述 相关知识 spark-submit参数 计算圆周率 编程要求 测试说明 任务描述 本关任务&#xff1a;学会将程序提交到集群上执行。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a;1.了解spark-submit的参数。2.学会提交Spar…

双目深度估计原理立体视觉

双目深度估计原理&立体视觉 0. 写在前面1. 双目估计的大致步骤2. 理想双目系统的深度估计公式推导3. 双目标定公式推导4. 极线校正理论推导 0. 写在前面 双目深度估计是通过两个相机的对同一个点的视差来得到给该点的深度。 标准系统的双目深度估计的公式推导需要满足:1)两…

按键的软件消抖

1.当出现物理情况比如单片机不小心摔了会发生灯亮的情况&#xff0c;所以我们得增加个延迟函数 2.这个错误是缺少头文件#include <intrins.h> 3. #include "reg52.h" #include <intrins.h>sbit key2 P2^0; sbit key1 P2^1; sbit ledone P3^7;voi…

稳扎稳打 部署丝滑 开源即时通讯(IM)项目OpenIM源码部署流程(linux windows mac)

背景 OpenIM包含多个关键组件&#xff0c;每个都是系统功能必不可少的一部分。具体来说&#xff0c;MongoDB 用于持久化存储&#xff1b;Redis 用作缓存&#xff1b;Kafka 用于消息队列&#xff1b;Zookeeper 用于服务发现&#xff1b;Minio 用于对象存储。这些组件的众多可能会…

用OpenCV先去除边框线,以提升OCR准确率

在OpenCV的魔力下&#xff0c;我们如魔法师般巧妙地抹去表格的边框线&#xff0c;让文字如诗如画地跃然纸上。 首先&#xff0c;我们挥动魔杖&#xff0c;将五彩斑斓的图像转化为单一的灰度世界&#xff0c;如同将一幅绚丽的油画化为水墨画&#xff0c;通过cv2.cvtColor()函数的…

【多级缓存】多级缓存OpenResty,Canal,nginx本地缓存

多级缓存 安装OpenRestyOpenResty入门OpenResty获取请求参数OpenResty向tomcat服务器发送请求 在nginx与tomcat端之间添加redis缓存Redis本地缓存缓存同步缓存同步策略基于Canal的异步通知安装Canal Canal客户端 安装OpenResty OpenResty是一个基于 Nginx的高性能 Web 平台&am…

[iOS]使用CocoaPods发布私有库

1.创建私有 Spec 仓库 首先&#xff0c;需要一个私有的 Git 仓库来存放你的 Podspec 文件&#xff0c;这个仓库用于索引你所有的私有 Pods。 在 GitHub 或其他 Git 服务上创建一个新的私有仓库&#xff0c;例如&#xff0c;名为 PrivatePodSpecs。克隆这个仓库到本地&#xf…

使用STM32CubeMX对STM32F4进行串口配置

目录 1. 配置1.1 Pin脚1.2 RCC开启外部晶振1.3 时钟1.4 串口配置 2. 代码2.1 默认生成代码2.1 开启串口中断函数2.3 接收中断2.4 接收回调函数2.5 增加Printf 的使用 1. 配置 1.1 Pin脚 1.2 RCC开启外部晶振 1.3 时钟 外部使用8MHz晶振 开启内部16MHz晶振 使用锁相环 开启最高…

机器学习:深入解析SVM的核心概念(问题与解答篇)【四、软间隔与正则化】

软间隔与正则化 问题一&#xff1a;优化目标函数是如何得到的&#xff1f;得到的过程是怎样的&#xff1f;问题二&#xff1a;拉格朗日乘子法计算详细过程问题三&#xff1a;KKT条件求解过程问题四&#xff1a;结构风险最小化&#xff08;SRM&#xff09;的原理 在前面的讨论中…

针孔相机模型原理坐标系辨析内参标定流程内参变换

针孔相机的内参标定 针孔相机原理真空相机模型图片的伸缩和裁剪变换 内参标定———非线性优化张正定标定详细原理(含公式推导)通过多张棋盘格照片完成相机的内参标定流程(C代码)其他工具箱 相机分为短焦镜头和长焦镜头&#xff0c;短焦镜头看到的视野更广阔&#xff0c;同样距…

全新突破:「Paraverse平行云」实现3D/XR企业级应用全面接入Apple Vision Pro

在前不久举行的GTC开发者大会上&#xff0c;英伟达引领行业风向&#xff0c;宣布其Omniverse平台能够助力企业将3D/XR应用流畅传输至Apple Vision Pro混合现实头显。在英伟达与苹果这两大科技巨头的合作下,此举标志着3D/XR技术迈向新纪元的关键一步。「Paraverse平行云」实时云…

JavaScript中的扩展操作符作用是什么,有什么含义?

在 JavaScript 中&#xff0c;扩展操作符允许一个表达式在某些地方展开成多个元素。这个特性在 ES2015 (也叫做 ES6) 中被引入到 JavaScript 语言中&#xff0c;并广泛用于数组和对象。在您的代码示例中&#xff0c;它被用于对象。 对象中的扩展操作符 在对象字面量中使用扩展…