RustGUI学习(iced)之小部件(一):如何使用按钮和文本标签部件

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

概述
这是本专栏的第一篇,主要讲述按钮(button)和文本标签(text)两个部件的使用,会结合实例来说明。

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

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

本篇内容:
1、button
2、text

一、按钮部件

按钮部件在iced中的定义如下:

/// Creates a new [`Button`] with the provided content.  
///
/// [`Button`]: crate::Button
pub fn button<'a, Message, Theme, Renderer>(content: impl Into<Element<'a, Message, Theme, Renderer>>,
) -> Button<'a, Message, Theme, Renderer>
whereRenderer: core::Renderer,Theme: button::StyleSheet,
{Button::new(content)
}

上面是官方的代码,可以知道,button其实是Button来创建的。而Button来自于iced_widget库:

#[allow(missing_debug_implementations)]
pub struct Button<'a, Message, Theme = crate::Theme, Renderer = crate::Renderer>      
whereTheme: StyleSheet,Renderer: crate::core::Renderer,
{content: Element<'a, Message, Theme, Renderer>,on_press: Option<Message>,width: Length,height: Length,padding: Padding,clip: bool,style: Theme::Style,
}

我们可以看到,一个新建的button,拥有以下属性或者方法:
content、on_press、width、height、padding、clip、style
其中,content按照定义,是一个Element,即可以是任何元素,但一般情况下,我们会给content赋为纯文本(即按钮名称)或者文本部件(即text)。
width、height这两个属性好理解,即按钮的宽、高,宽、高属性既可以设置为预设值,也可以设置为自定义的大小。
padding是指的按钮的content与按钮整个框架的间距。
clip是指当按钮尺寸小于文字时,多出的文字是显示还是隐藏。
style是设置按钮的外观样式,可以使用库预设的样式,也可以使用自定义的样式,下文将会详述。
我们先来看一下button实际的代码:

button("按钮1").clip(false).width(80).height(40).style(style6).padding(4)    .on_press(Message::Clicked),

这是一个典型的button实例,上面的代码中,“按钮1”即content,其他属性则显而易见,其中style的参数style6如下:

let style6=theme::Button::Custom(Box::new(MyButtonStyle));

此处使用的是自定义外观,库预设的样式如下:

let style1=theme::Button::Primary;let style2=theme::Button::Secondary;let style3=theme::Button::Positive;let style4=theme::Button::Destructive;let style5=theme::Button::Text;

看一下这五种预设的按钮样式实际是什么样的:
在这里插入图片描述
如果预设样式足够使用,那么直接使用即可,如果预设样式不满足,那么还可以使用自定义样式,比如要设置按钮边框,添加圆角,改变颜色等,我们来看一下如何设置自定义按钮样式:
我们查看iced源码可知,按钮的样式是在StyleSheet这个特性下设置的:

pub trait StyleSheet {/// The supported style of the [`StyleSheet`].type Style: Default;/// Produces the active [`Appearance`] of a button.fn active(&self, style: &Self::Style) -> Appearance;/// Produces the hovered [`Appearance`] of a button.fn hovered(&self, style: &Self::Style) -> Appearance {let active = self.active(style);Appearance {shadow_offset: active.shadow_offset + Vector::new(0.0, 1.0),..active}}/// Produces the pressed [`Appearance`] of a button.fn pressed(&self, style: &Self::Style) -> Appearance {Appearance {shadow_offset: Vector::default(),..self.active(style)}}/// Produces the disabled [`Appearance`] of a button.fn disabled(&self, style: &Self::Style) -> Appearance {let active = self.active(style);Appearance {shadow_offset: Vector::default(),background: active.background.map(|background| match background {Background::Color(color) => Background::Color(Color {a: color.a * 0.5,..color}),Background::Gradient(gradient) => {Background::Gradient(gradient.mul_alpha(0.5))}}),text_color: Color {a: active.text_color.a * 0.5,..active.text_color},..active}}
}

如果我们要设置自定义的样式,那么新建一个样式结构体,然后将StyleSheet赋予我们新建的样式,在其中修改即可,如下:
1、新建样式:

struct MyButtonStyle;

2、实现StyleSheet特性

impl  StyleSheet for MyButtonStyle{      type Style = Theme;//激活时外观fn active(&self, style: &Self::Style) -> button::Appearance {Appearance{shadow_offset:Vector{x:0.0,y:0.0},background:Some(style.extended_palette().primary.base.color.into()),text_color:style.extended_palette().background.base.text,border:Border{color:Color::BLACK,width:1.0,radius:[3.0;4].into(),},shadow:Shadow { color: Color::WHITE, offset: Vector{x:0.0,y:0.0},blur_radius:0.0 },}}//悬停时外观fn hovered(&self, style: &Self::Style) -> Appearance {Appearance{shadow_offset:Vector{x:0.0,y:0.0},background:Some(style.extended_palette().primary.weak.color.into()),text_color:style.extended_palette().primary.weak.text,border:Border{color:Color::BLACK,width:1.0,radius:[3.0;4].into(),},shadow:Shadow {color: Color::WHITE,offset: Vector{x:0.0,y:0.0},blur_radius:0.0,}}}//按下时外观fn pressed(&self, style: &Self::Style) -> Appearance {Appearance{shadow_offset:Vector{x:0.0,y:0.0},background:Some(style.extended_palette().primary.strong.color.into()),text_color:style.extended_palette().primary.weak.text,border:Border{color:Color::BLACK,width:1.0,radius:[3.0;4].into(),},shadow:Shadow {color: Color::BLACK,offset: Vector{x:0.0,y:0.0},blur_radius:0.0,}}}
}

可以看到,我们在此处设置了按钮的激活、悬停、按压三种状态下的外观,具体来说,就是修改Appearance这个属性,其子属性如下:

pub struct Appearance {     /// The amount of offset to apply to the shadow of the button.pub shadow_offset: Vector,/// The [`Background`] of the button.pub background: Option<Background>,/// The text [`Color`] of the button.pub text_color: Color,/// The [`Border`] of the buton.pub border: Border,/// The [`Shadow`] of the butoon.pub shadow: Shadow,
}

这是官方定义的按钮的Appearance属性,我们只要一一修改,就可以得到我们自己的Appearance。如上面的示例代码中,我们修改了背景色、圆角半径等,其中shadow可以设置按钮的阴影,有兴趣的可以去尝试,可以做出不同的效果,当然,对于普通的UI界面来说,不需要那么复杂的效果,那么只要修改背景色、文字颜色、边框、圆角半径等即可。
当我们新建样式完成后,就可以在创建按钮时调用了:

let style6=theme::Button::Custom(Box::new(MyButtonStyle));

此处,Custom的参数形式,在官方定义中如下:

Custom(Box<dyn button::StyleSheet<Style = Theme>>), 

来看一下自定义样式和预设样式有什么不一样:
在这里插入图片描述
按钮的样式说的差不多了,下面说一下按钮最重要的一个属性,on_press,这是按钮能够进行交互的基础,当用户点击按钮时,就会触发on_press,然后将on_press的消息Message传递给后台,根据按钮传递的消息,运行相应的逻辑,然后再更新UI。
示例代码中如下:

 button("按钮1").clip(false).width(80).height(40).style(style1).padding(4).on_press(Message::Clicked),

on_press的参数为Message::Clicked,此处的Message::Clicked需要自己创建,是enum枚举:

#[derive(Debug,Clone,Copy)]
enum Message{  Clicked,
}

当按钮被点击时,Message::Clicked就会被触发,然后在iced的update函数中,我们可以处理这个message:

 fn update(&mut self,message:Message){   match message{Message::Clicked => {self.value +=1;}    }}

即,当Message::Clicked触发一次,就会执行一次当前Message::Clicked下对应的程序,本例中即将value这个值加1.

那么,当我点击了按钮,value值也加1了,该如何将这个变化反应到UI界面,使其直观显示出来呢?

我们会用到iced的view函数:

fn view(&self) -> Element<Message>{           }

view函数实时显示当前UI,所以,我们要将部件都写在view函数中,比如,本例中我添加一个按钮、一个文本标签,然后当点击按钮时,文本的值加1.

fn view(&self) -> Element<Message>{     let style6=theme::Button::Custom(Box::new(MyButtonStyle));let  style7=theme::Text::Color(Color::BLACK);column![button("按钮6").clip(false).width(80).height(40).style(style6).padding(4).on_press(Message::Clicked),text(format!("value:{}",self.value)).size(15).width(40).height(40).style(style7),].padding(20).spacing(20).into()}

如上,我们添加了按钮,这不用多说,又添加了一个text部件,其中,text部件的text属性部分,我们将其设置为与value值绑定,这样,每当value值变化,view函数都会刷新text部件的文本部分。
这其中,column是一种排列方式,即区域内的部件按照纵向排列,另一种方式是row,即横向排列。
看一下实际效果:
在这里插入图片描述

二、文本标签

再来说一下文本标签的使用,相比于按钮,文本标签要简单许多,在官方的定义中,text部件如下:

/// Creates a new [`Text`] widget with the provided content. 
///
/// [`Text`]: core::widget::Text
pub fn text<'a, Theme, Renderer>(text: impl ToString,
) -> Text<'a, Theme, Renderer>
whereTheme: text::StyleSheet,Renderer: core::text::Renderer,
{Text::new(text.to_string())
}

可以看到,其来自于Text:

/// A paragraph of text.                  
#[allow(missing_debug_implementations)]
pub struct Text<'a, Theme, Renderer>
whereTheme: StyleSheet,Renderer: text::Renderer,
{content: Cow<'a, str>,size: Option<Pixels>,line_height: LineHeight,width: Length,height: Length,horizontal_alignment: alignment::Horizontal,vertical_alignment: alignment::Vertical,font: Option<Renderer::Font>,shaping: Shaping,style: Theme::Style,
}

其中content是文本要显示的字符,size是文字的尺寸,width和height是宽、高,horizontal_alignment是设置文字的水平样式,有左、中、右可选,而vertical_alignment是设置文字的垂直样式,顶部、中间、底部可选,font是设置字体,如果不设置,则和主窗体保持一致,shaping应该指的是文字的显示质量。style是指文字样式,在text的style中,只有颜色可以修改,如下:

/// The style sheet of some text. 
pub trait StyleSheet {/// The supported style of the [`StyleSheet`].type Style: Default + Clone;/// Produces the [`Appearance`] of some text.fn appearance(&self, style: Self::Style) -> Appearance;
}
/// The apperance of some text.   
#[derive(Debug, Clone, Copy, Default)]
pub struct Appearance {/// The [`Color`] of the text.////// The default, `None`, means using the inherited color.pub color: Option<Color>,
}

可以看到,text的样式就是修改颜色。
我们在上面的示例中如下:

text(format!("value:{}",self.value)).size(15).shaping(Shaping::Advanced) .width(40).height(40).style(style7),

如果要设置文字的排列样式,可以添加:

text(format!("value:{}",self.value)).size(15).shaping(Shaping::Advanced)     .horizontal_alignment(alignment::Horizontal::Center).vertical_alignment(alignment::Vertical::Center).width(40).height(40).style(style7),

如上代码,文字就会一直保持在中心位置。

下面再来简单说一下窗体的属性问题,iced建立窗体,有两种样式,一种是比较简单的呈现,是sandbox,另一种是application。
在前期,我们会使用sandbox来演示。

pub fn main() -> iced::Result {    Counter::run(Settings::default())
}

以上是官方的默认主程序,此处运行主窗体,其中的参数设置皆为默认,但默认的参数不一定适用,所以需要对其进行修改。
如果要修改默认参数,需要先导入:

use iced::font::Family; 
use iced::window::{self,icon,Position};

以及:

extern crate image;
use image::GenericImageView;

此处的image库是用来处理图像的。

接下来看一下如何修改窗口参数:

pub fn main() -> iced::Result {//Counter::run(Settings::default())let myfont="微软雅黑";let ico=image_to_icon("..\\gui-btn\\img\\ico1.png");Counter::run(Settings{window:window::Settings{size:Size{width:800.0,height:600.0},position:Position::Specific(Point{x:100.0,y:20.0}),icon:Some(ico),..window::Settings::default()},default_font:Font { family:Family::Name(myfont),..Font::DEFAULT},..Settings::default()})}

如上代码,可以看到,我们设置了窗体尺寸、窗体显示位置、窗体图标、字体,事实上程序参数如下:

/// The settings of an application.    
#[derive(Debug, Clone)]
pub struct Settings<Flags> {/// The identifier of the application.////// If provided, this identifier may be used to identify the application or/// communicate with it through the windowing system.pub id: Option<String>,/// The window settings.////// They will be ignored on the Web.pub window: window::Settings,/// The data needed to initialize the [`Application`].////// [`Application`]: crate::Applicationpub flags: Flags,/// The fonts to load on boot.pub fonts: Vec<Cow<'static, [u8]>>,/// The default [`Font`] to be used.////// By default, it uses [`Family::SansSerif`](crate::font::Family::SansSerif).pub default_font: Font,/// The text size that will be used by default.////// The default value is `16.0`.pub default_text_size: Pixels,/// If set to true, the renderer will try to perform antialiasing for some/// primitives.////// Enabling it can produce a smoother result in some widgets, like the/// [`Canvas`], at a performance cost.////// By default, it is disabled.////// [`Canvas`]: crate::widget::Canvaspub antialiasing: bool,
}

其中,window参数又如下:

/// The window settings of an application.    
#[derive(Debug, Clone)]
pub struct Settings {/// The initial logical dimensions of the window.pub size: Size,/// The initial position of the window.pub position: Position,/// The minimum size of the window.pub min_size: Option<Size>,/// The maximum size of the window.pub max_size: Option<Size>,/// Whether the window should be visible or not.pub visible: bool,/// Whether the window should be resizable or not.pub resizable: bool,/// Whether the window should have a border, a title bar, etc. or not.pub decorations: bool,/// Whether the window should be transparent.pub transparent: bool,/// The window [`Level`].pub level: Level,/// The icon of the window.pub icon: Option<Icon>,/// Platform specific settings.pub platform_specific: PlatformSpecific,/// Whether the window will close when the user requests it, e.g. when a user presses the/// close button.////// This can be useful if you want to have some behavior that executes before the window is/// actually destroyed. If you disable this, you must manually close the window with the/// `window::close` command.////// By default this is enabled.pub exit_on_close_request: bool,
}

我们并不是每一个参数都需要修改,这里我们只是修改了尺寸、位置、图标以及字体这种常用的参数,其余的参数可以全部默认。
在我们上面的代码中,有一句处理图像的程序:

let ico=image_to_icon("..\\gui-btn\\img\\ico1.png");

其中的image_to_icon是我们自定义的函数,用于将图像转为icon,函数如下:

///
/// 将图片转为窗口图标
/// 
fn image_to_icon(img:&str)-> icon::Icon {           let img=image::open(img).unwrap();let img_de=img.dimensions();//println!("img_de is {:?}",img_de);let w1=img_de.0;let h1=img_de.1;let img_file=img.to_rgba8();let ico=icon::from_rgba(img_file.to_vec(),w1,h1);let ico_file=match ico{Ok(file)=>file,Err(e)=>panic!("error is {}",e),};ico_file
}

这里用到image库,需要在toml中添加:

image="0.25.1"

以上就是本篇的内容,其中涉及窗口的内容,在以后的篇章中将不再赘述。

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

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

相关文章

前端CSS基础8(盒子模型(margin、border、padding、content))

前端CSS基础8&#xff08;盒子模型&#xff08;margin、border、padding、content&#xff09;&#xff09; CSS盒子模型CSS中常用的长度单位元素的分类&#xff0c;各个元素的显示模式修改元素的显示模式&#xff08;类型&#xff09;盒子模型的组成部分盒子内容区-contentCSS…

关于分布式锁的释放和spring事务提交时机不符合预期从而带来的数据不一致的问题

提要 首先注意&#xff0c;本文探讨的不是分布式事务&#xff0c;请读者注意区分&#xff01; 在我们的日常开发种&#xff0c;分布式锁和spring事务是常见的两种控制数据一致性的方式。 分布式锁和spring事务各自的作用就不做阐述了&#xff0c;不是本文重点&#xff0c;本文…

AIGC技术的发展现状与未来趋势

AIGC&#xff08;人工智能生成内容&#xff09;技术是近年来快速发展的领域之一&#xff0c;它涉及使用人工智能来创建或编辑内容&#xff0c;包括文本、图像、音乐和视频等。这项技术的进步为各个行业带来了革命性的变化&#xff0c;同时也引发了一系列伦理和风险问题。 一、技…

宜搜科技死磕港交所上市:从搜索引擎到广告投放,业绩疲态凸显

近日&#xff0c;宜搜科技控股有限公司&#xff08;下称“宜搜科技”&#xff09;向港交所递交招股书&#xff0c;计划在香港主板上市&#xff0c;中银国际为其独家保荐人。 值得注意的是&#xff0c;宜搜科技已在资本市场辗转多年。该公司曾于2014年向纽交所递交上市申请&…

CentOS7编译jsoncpp静态库

1. 官网下载源码 github地址&#xff1a;GitHub - open-source-parsers/jsoncpp at update 2. 编译 Unzip jsoncpp-master.zip Cd jsoncpp-master mkdir -p ./build/debug cd ./build/debug/ cmake -DCMAKE_BUILD_TYPEdebug -DBUILD_SHARED_LIBSOFF -DCMAKE_ARCHIVE_OUTPUT_D…

docker快速搭建部署mqtt

文章目录 前言一、mqtt是什么&#xff1f;二、使用步骤1.引入库2.创建临时容器3.创建挂在目录4.将临时容器的配置挂载到宿主机中5.删除临时容器6.运行容器并挂载文件7.登录EMQX内置的管理控制台 总结 前言 一、mqtt是什么&#xff1f; MQTT&#xff08;Message Queuing Teleme…

Ts类型体操详讲 之 extends infer (下)

目录 1、函数 &#xff08;1&#xff09;提取参数类型 &#xff08;2&#xff09;提取返回值类型 2、构造器 &#xff08;1&#xff09;提取构造器返回值 &#xff08;2&#xff09;提取构造器参数类型 3、索引类型 本章我们继续上节的内容继续&#xff0c;展示我们对ex…

提升你的C编程技能:使用cURL下载Kwai视频

概述 本文将介绍如何利用C语言以及cURL库来实现Kwai视频的下载。cURL作为一个功能强大的网络传输工具&#xff0c;能够在C语言环境下轻松地实现数据的传输。我们还将探讨如何运用代理IP技术&#xff0c;提升爬虫的匿名性和效率&#xff0c;以适应Kwai视频平台的发展趋势。 正…

报告!这里发现了一个赛博炼丹的神级平台!

众所周知&#xff0c;“赛博炼丹”是一个AI开发研究领域古老又神秘的活动&#xff0c;它往往对炼丹平台有很高的要求。如果你也是一路从“炼丹小白”成长到“资深AI算法工程师”&#xff0c;那你一定懂我在说什么&#xff1f;说好了&#xff0c;天台见&#xff01; GpuMall智算…

力扣HOT100 - 108. 将有序数组转换为二叉搜索树

解题思路&#xff1a; 二叉搜索树一般使用中序遍历 class Solution {public TreeNode sortedArrayToBST(int[] nums) {return helper(nums,0,nums.length-1);}public TreeNode helper(int[] nums,int left,int right){if(left>right) return null;//确定根节点//总是选择中…

【缓存服务】⭐️自定义实现一个简易的数据缓存

目录 &#x1f378;前言 &#x1f37b;手写缓存服务 &#xff08;1&#xff09;缓存实体类 &#xff08;2&#xff09;缓存工具类 &#xff08;3&#xff09;测试缓存服务 &#x1f377;已有的缓存工具 &#x1f379;章末 &#x1f378;前言 俗话说 有轮子不用 就是玩 开个…

条件生成对抗网络(cGAN)在AI去衣技术中的应用探索

随着深度学习技术的飞速发展&#xff0c;生成对抗网络&#xff08;GAN&#xff09;作为其中的一个重要分支&#xff0c;在图像生成、图像修复等领域展现出了强大的能力。其中&#xff0c;条件生成对抗网络&#xff08;cGAN&#xff09;通过引入条件变量来控制生成模型的输出&am…

Spring SpringBoot(详解)

1. Spring简介 1.1 Spring 核心设计思想 1.1.1 Spring 是什么&#xff1f; Spring 是包含了众多⼯具⽅法的 IoC 容器。Spring 指的是 Spring Framework&#xff08;Spring 框架&#xff09;&#xff0c;它是⼀个开源框架&#xff0c;Spring ⽀持⼴泛的应⽤场景&#xff0c;它…

手撕AVL树(map和set底层结构)(1)

troop主页 今日鸡汤&#xff1a;Action may out always bring happiness;but there is no happiness without action. 行动不一定能带来快乐&#xff0c;但不行动一定不行 C之路还很长 手撕AVL树 一 AVL树概念二 模拟实现AVL树2.1 AVL节点的定义 三 插入更新平衡因子&#xff0…

SpringBoot学习之Kafka下载安装和启动【Mac版本】(三十三)

一、配置Java环境变量 在启动Kafka之前,你需要先正确配置好你的Java环境变量。可以在终端输入java -version检查java环境变量是否配置正确,在Mac上如何配置java环境变量,请读者自行网上搜索操作之,此处不赘叙。 二、下载安装Kafka 1、下载Kafka:Apache Kafka,这两个版本…

四川赢涟电子商务有限公司深耕抖音电商服务

在当今数字化、网络化高速发展的时代&#xff0c;电子商务行业异军突起&#xff0c;成为推动经济增长的重要力量。四川赢涟电子商务有限公司凭借其敏锐的市场洞察力和创新精神&#xff0c;专注于抖音电商服务&#xff0c;致力于为广大消费者提供便捷、高效、个性化的购物体验&a…

Paddle 1.8 与 Paddle 2.0 API 映射表

安装2.6的paddlepaddle之后总是报fluid的错误&#xff0c;查询得知这个接口已经弃用了&#xff0c;但是一直找不到替换接口&#xff0c;偶然查询报错信息的时候找到了映射表&#xff0c;转存一下。 Paddle 1.8 与 Paddle 2.0 API 映射表

如何优雅地Spring事务编程

本文已收录至Github&#xff0c;推荐阅读 &#x1f449; Java随想录 微信公众号&#xff1a;Java随想录 在开发中&#xff0c;有时候我们需要对 Spring 事务的生命周期进行监控&#xff0c;比如在事务提交、回滚或挂起时触发特定的逻辑处理。那么如何实现这种定制化操作呢&am…

直播报名 | 科技出海新势力,遥感+AI助力一带一路

遥感技术的出海之路顺畅吗&#xff1f; 国内外遥感应用的关注点相同吗&#xff1f; 目前珈和主要辐射哪些海外国家&#xff1f; … 上周数据赋农季第三期《科技出海&#xff0c;遥感AI赋能“一带一路”提升种植园规模效益》直播预告一出&#xff0c;小伙伴们纷纷来咨询珈和的海…

CentOS安装htop工具

启用 EPEL Repository 安装Htop 首先启用 EPEL Repository: yum -y install epel-release启用 EPEL Repository 后, 可以用 yum 直接安裝 Htop: 安装htop yum -y install htop安装成功 输入htop使用工具 htop安装glances工具 yum install glances