RustGUI学习（iced）之小部件（二）：如何使用滑动条部件

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

概述
这是本专栏的第二篇，主要讲述滑动条（slider）这个部件的使用，会结合实例来说明。
系列博客链接：
1、RustGUI学习（iced）之小部件（一）：如何使用按钮和文本标签部件

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

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

本篇内容：
1、slider

滑动条部件

slider部件在iced中的定义如下：

/// Creates a new [`Slider`].
///
/// [`Slider`]: crate::Slider
pub fn slider<'a, T, Message, Theme>(
    range: std::ops::RangeInclusive<T>,
    value: T,
    on_change: impl Fn(T) -> Message + 'a,
) -> Slider<'a, T, Message, Theme>
where
    T: Copy + From<u8> + std::cmp::PartialOrd,
    Message: Clone,
    Theme: slider::StyleSheet,
{
    Slider::new(range, value, on_change)
}

其由Slider来创建：

#[allow(missing_debug_implementations)]
pub struct Slider<'a, T, Message, Theme = crate::Theme>     
where
    Theme: StyleSheet,
{
    range: RangeInclusive<T>,
    step: T,
    shift_step: Option<T>,
    value: T,
    default: Option<T>,
    on_change: Box<dyn Fn(T) -> Message + 'a>,
    on_release: Option<Message>,
    width: Length,
    height: f32,
    style: Theme::Style,
}

从上面可以看到，slider包含有以上属性或者方法，我们一一来看一下。
range表示的是滑动条的范围，即最小和最大值。
step表示滑动条滑动的最小单位，即拖动时slider值改变的最小值。
shift_step表示当按下shift键时拖动滑动条的最小值。
value表示滑动条当前值。
defualt表示默认值，或者初始值。
on_change表示滑动条滑动时触发。
on_release表示滑动条释放时触发。
width、height表示宽、高。
style表示滑动条的样式，有默认和自定义可选。

我们先来看一下slider实际应用：

 slider(1.0..=40.0, self.value_sld,Message::SliderChanged).default(self.default) 
            .step(self.step).shift_step(self.shift_step)
            .width(100).style(style8),

如上代码，range为1.0…=40.0，这种表示方式，表示最小为1，最大为40.需要注意的是数据格式，range、value包括step等都需要保持一致，如此处是f32.
此处的value为self.value_sld，来自于自定义的struct：

struct Example{             
    value:i64,
    value_sld:f32,
    default:f32,
    step:f32,
    shift_step:f32,
}

on_change则绑定了enum的message：

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

即每当滑动条滑动时，都会将当前滑动条的值传入SliderChanged（f32）中，我们只需要在iced的update函数中去处理这个值即可。

 Message::SliderChanged(value)=>{
                self.value_sld=value;
            }

将滑动条的内部值传递给value_sld，value_sld表示滑块的实时位置，这样，拖动时，滑块就可以跟踪鼠标实时滑动。
default、step和shift_step只需要将前面定义好的值填入即可：

struct Example{   
    value:i64,
    value_sld:f32,
    value_sld2:f32,
    default:f32,
    step:f32,
    shift_step:f32,
}

width用于设置滑动条的宽度，可以使用预设，也可以自定义值，无需多说。
主要说一下style，即滑动条的样式设置。前面说过，style有默认和自定义两种可选，先来看一下默认样式：

let style8=theme::Slider::Default;

看一下实际效果：
在这里插入图片描述
默认样式看起来也不错，如果不满足于默认样式，那么可以使用自定义，和我们在前一篇中说到的按钮的样式自定义一样，如果要对slider进行自定义，也需要对其实现StyleSheet这个特性，只不过按钮时button style，而此处是slider style。

我们来看下slider的StyleSheet：

/// A set of rules that dictate the style of a slider.    
pub trait StyleSheet {
    /// The supported style of the [`StyleSheet`].
    type Style: Default;

    /// Produces the style of an active slider.
    fn active(&self, style: &Self::Style) -> Appearance;

    /// Produces the style of an hovered slider.
    fn hovered(&self, style: &Self::Style) -> Appearance;

    /// Produces the style of a slider that is being dragged.
    fn dragging(&self, style: &Self::Style) -> Appearance;
}

和按钮的样式差不多，有一些区别在于其触发事件，slider没有press，而是dragging，即拖拽。
再来看下slider的外观Appearance：

/// The appearance of a slider. 
#[derive(Debug, Clone, Copy)]
pub struct Appearance {
    /// The colors of the rail of the slider.
    pub rail: Rail,
    /// The appearance of the [`Handle`] of the slider.
    pub handle: Handle,
}

可以看到，slider的外观属性分为两方面，一个是rail，一个是handle，即滑动轨道和滑动块，可以分别设置。
其中：rail：

/// The appearance of a slider rail      
#[derive(Debug, Clone, Copy)]
pub struct Rail {
    /// The colors of the rail of the slider.
    pub colors: (Color, Color),
    /// The width of the stroke of a slider rail.
    pub width: f32,
    /// The border radius of the corners of the rail.
    pub border_radius: border::Radius,
}

对于rail即滑动轨道，可以设置其前景色、背景色，轨道粗细以及轨道圆角。

handle：

/// The appearance of the handle of a slider.  
#[derive(Debug, Clone, Copy)]
pub struct Handle {
    /// The shape of the handle.
    pub shape: HandleShape,
    /// The [`Color`] of the handle.
    pub color: Color,
    /// The border width of the handle.
    pub border_width: f32,
    /// The border [`Color`] of the handle.
    pub border_color: Color,
}

对于handle即滑块，可以设置滑块形状、颜色、边框粗细以及颜色，这其中滑块形状又可以设置：

/// The shape of the handle of a slider. 
#[derive(Debug, Clone, Copy)]
pub enum HandleShape {
    /// A circular handle.
    Circle {
        /// The radius of the circle.
        radius: f32,
    },
    /// A rectangular shape.
    Rectangle {
        /// The width of the rectangle.
        width: u16,
        /// The border radius of the corners of the rectangle.
        border_radius: border::Radius,
    },
}

可以选择圆形，也可以选择方形。
综上所述，滑动条的外观可调整性还是很强的，无论是形状、颜色、大小以及圆角半径都可以自定义。
接下来我们看下如何自定义滑动条的样式：
1、新建样式结构体

//自定义slider样式1
struct MySliderStyle;

2、实现StyleSheet

impl slider::StyleSheet for MySliderStyle { 
    type Style = Theme;
    //激活时外观
    
    fn active(&self, style: &Self::Style) -> slider::Appearance {
     
        slider::Appearance { 
            rail: Rail{
                colors:(Color::from_rgb8(20, 48, 210),Color::from_rgb8(151, 155, 175)),
                width:5.0,
                border_radius:[3.0;4].into(),
            }, 
            handle: slider::Handle{
                shape:HandleShape::Rectangle { width: 8, border_radius: [2.0;4].into() },
                color:Color::from_rgb8(13, 248,44),
                border_width:1.0,
                border_color:Color::BLACK,
            }
        }
    }
    //悬停时外观
    fn hovered(&self, style: &Self::Style) -> slider::Appearance {
        slider::Appearance { 
            rail: Rail{
                colors:(Color::from_rgb8(20, 48, 210),Color::from_rgb8(151, 155, 175)),
                width:5.0,
                border_radius:[3.0;4].into(),
            }, 
            handle: slider::Handle{
                shape:HandleShape::Rectangle { width: 8, border_radius: [2.0;4].into()},
                color:Color::from_rgb8(176, 171,186),
                border_width:1.0,
                border_color:Color::BLACK,
            }
        }
    }
    //拖拽时外观
    fn dragging(&self, style: &Self::Style) -> slider::Appearance {
        slider::Appearance { 
            rail: Rail{
                colors:(Color::from_rgb8(20, 48, 210),Color::from_rgb8(151, 155, 175)),
                width:5.0,
                border_radius:[3.0;4].into(),
            }, 
            handle: slider::Handle{
                shape:HandleShape::Rectangle { width: 8, border_radius: [2.0;4].into() },
                color:Color::from_rgb8(13, 248,44),
                border_width:1.0,
                border_color:Color::BLACK,
            }
        }
        
    }
}

看一下自定义的效果：
在这里插入图片描述
和默认的放一起对比下：
在这里插入图片描述
区别还是很明显的，也可以将滑动块设置为圆形，关于样式就差不多了。

接下来说一下本例中slider的应用，即拖动slider时，其值改变，实时值会在下方的文本text中显示，同时，对滑动条的值进行转换，作为上方text的尺寸倍率，即拖动slider时，上方文本的大小会随之改变，看一下实际效果：
在这里插入图片描述
这里的实现也很简单，即获取slider的实时值后，将其进行转换，然后将转换的倍率和text文本的size值相乘即可：

let scale1=self.value_sld /20.0;
        let size1=15.0*scale1;

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

mybatis基本使用

mybatis基本使用

文章目录 1. mybatis2. 基本使用(1) maven坐标(2) 配置文件编写(3) 数据库操作(4) 注解查询 2. 基本配置(1) 读取外部配置文件(2) mapper映射 3. 映射文件查询删除/修改/新增 动态sql 1. mybatis MyBatis 是一款优秀的持久层框架&#xff0c;它支持自定义 SQL、存储过程以及高…
阅读更多...
CSS盒子模型（如果想知道CSS有关盒子模型的知识点，那么只看这一篇就足够了！）

CSS盒子模型（如果想知道CSS有关盒子模型的知识点，那么只看这一篇就足够了！）

前言&#xff1a;在网页制作的时候&#xff0c;我们需要将网页中的元素放在指定的位置&#xff0c;那么我们如何将元素放到指定的位置上呢&#xff1f;这时候我们就需要了解盒子模型。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSD…
阅读更多...
sCrypt全新上线RUNES功能

sCrypt全新上线RUNES功能

sCrypt智能合约平台全新上线一键etch/mint RUNES功能&#xff01; 请访问 https://runes.scrypt.io/ 或点击阅读原文体验&#xff01; 关于sCrypt sCrypt是BSV区块链上的一种智能合约高级语言。比特币使用基于堆栈的Script语言来支持智能合约&#xff0c;但是用原生Script编…
阅读更多...
网络靶场实战-物联网安全Unicorn框架初探

网络靶场实战-物联网安全Unicorn框架初探

背景 Unicorn 是一款基于 QEMU 的快速 CPU 模拟器框架&#xff0c;可以模拟多种体系结构的指令集&#xff0c;包括 ARM、MIPS、PowerPC、SPARC 和 x86 等。Unicorn使我们可以更好地关注 CPU 操作, 忽略机器设备的差异。它能够在虚拟内存中加载和运行二进制代码&#xff0c;并提…
阅读更多...
密码加密案例

密码加密案例

文章目录 描述思路错误关于增强for循环改变不了数组的值这一现象的疑问代码反思 描述 思路错误 应该是将其放入数组&#xff0c;而不是单纯的读到&#xff0c;因为你要对每一位数字进行操作 关于增强for循环改变不了数组的值这一现象的疑问 我们尝试使用增强for循环 键盘输…
阅读更多...
uniapp使用地图开发app

uniapp使用地图开发app

使用uniapp开发app中使用到地图的坑&#xff1a; 1、简单使用地图的功能比较简单&#xff0c;仅使用到地图选点和定位功能&#xff1a;&#xff08;其中问题集中在uni.chooseLocation中&#xff09;下面是api官网地址 uni.getLocation(OBJECT) | uni-app官网 官方建议app端使…
阅读更多...
迁移学习基础知识

迁移学习基础知识

简介 使用迁移学习的优势&#xff1a; 1、能够快速的训练出一个理想的结果 2、当数据集较小时也能训练出理想的效果。 注意&#xff1a;在使用别人预训练的参数模型时&#xff0c;要注意别人的预处理方式。 原理&#xff1a; 对于浅层的网络结构&#xff0c;他们学习到的…
阅读更多...
视频批量剪辑新纪元：轻松调整音频采样率，一键实现高效视频处理！

视频批量剪辑新纪元：轻松调整音频采样率，一键实现高效视频处理！

视频剪辑已成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;面对大量的视频文件&#xff0c;如何高效地进行批量剪辑&#xff0c;同时又能轻松调整音频采样率&#xff0c;成为了许多视频制作人员、自媒体从业者、教育者和学生的共同需求。 第一步&#xff0c;进入…
阅读更多...
[C++基础学习]----02-C++运算符详解

[C++基础学习]----02-C++运算符详解

前言 C中的运算符用于执行各种数学或逻辑运算。下面是一些常见的C运算符及其详细说明&#xff1a;下面详细解释一些常见的C运算符类型&#xff0c;包括其原理和使用方法。 正文 01-运算符简介 算术运算符&#xff1a; a、加法运算符&#xff08;&#xff09;&#xff1a;对两个…
阅读更多...
4.27日学习打卡----初学Redis（四）

4.27日学习打卡----初学Redis（四）

4.27日学习打卡 目录&#xff1a; 4.27日学习打卡一. Redis的配置文件二. Redis构建Web应用实践环境搭建redis的优点引入本地缓存Google 开源工具GuavaGuava实现本地缓存 一. Redis的配置文件 在Redis的解压目录下有个很重要的配置文件 redis.conf &#xff0c;关于Redis的很多…
阅读更多...
达梦(DM) SQL日期操作及分析函数

达梦(DM) SQL日期操作及分析函数

达梦DM SQL日期操作及分析函数 日期操作SYSDATEEXTRACT判断一年是否为闰年周的计算确定某月内第一个和最后一个周末某天的日期确定指定年份季度的开始日期和结束日期补充范围内丢失的值按照给定的时间单位查找使用日期的特殊部分比较记录 范围处理分析函数定位连续值的范围查找…
阅读更多...
如何通过安全数据传输平台，保护核心数据的安全传输？

如何通过安全数据传输平台，保护核心数据的安全传输？

在数字化的浪潮中&#xff0c;企业的数据安全传输显得尤为关键。随着网络攻击手段的日益复杂&#xff0c;传统的数据传输方式已不再安全&#xff0c;这就需要我们重视并采取有效的措施&#xff0c;通过安全数据传输平台来保护核心数据。 传统的数据传输面临的主要问题包括&…
阅读更多...
Bun 入门到精通（一）

Bun 入门到精通（一）

Bun 是什么&#xff1f; Bun 是用于 JavaScript 和 TypeScript 应用程序的多合一工具包。它作为一个名为 bun 的可执行文件提供。 其核心是 Bun 运行时&#xff0c;这是一个快速的 JavaScript 运行时&#xff0c;旨在替代 Node.js。它是用 Zig 编写的&#xff0c;并由 JavaSc…
阅读更多...
数字文旅重塑旅游发展新格局：以数字化转型为突破口，提升旅游服务的智能化水平，为游客带来全新的旅游体验

数字文旅重塑旅游发展新格局：以数字化转型为突破口，提升旅游服务的智能化水平，为游客带来全新的旅游体验

随着信息技术的迅猛发展&#xff0c;数字化已成为推动各行各业创新发展的重要力量。在旅游业领域&#xff0c;数字文旅的兴起正以其强大的驱动力&#xff0c;重塑旅游发展的新格局。数字文旅以数字化转型为突破口&#xff0c;通过提升旅游服务的智能化水平&#xff0c;为游客带…
阅读更多...
C#基础|OOP、类与对象的认识

C#基础|OOP、类与对象的认识

哈喽&#xff0c;你好&#xff0c;我是雷工&#xff01; 所有的面向对象的编程语言&#xff0c;都是把我们要处理的“数据”和“行为”封装到类中。 以下为OOP的学习笔记。 01 什么是面向对象编程&#xff08;OOP&#xff09;&#xff1f; 设计类&#xff1a;就是根据需求设计…
阅读更多...
论文精读InstructPix2Pix: Learning to Follow Image Editing Instructions

论文精读InstructPix2Pix: Learning to Follow Image Editing Instructions

InstructPix2Pix: Learning to Follow Image Editing Instructions 我们提出了一种根据人类指令编辑图像的方法:给定输入图像和告诉模型该做什么的书面指令&#xff0c;我们的模型遵循这些指令来编辑图像。 为了获得这个问题的训练数据&#xff0c;我们结合了两个大型预训练模…
阅读更多...
输入输出重定向，追加重定向(Linux)

输入输出重定向，追加重定向(Linux)

文章目录 一、输出重定向二、追加重定向三.输入重定向总结 一、输出重定向 我们在使用echo内容时&#xff0c;会把内容显示在显示器上。 echo自动换行。 我们如果输入 echo “hello linux” >file.txt 我们运行一下就会发现系统中多了一个file.txt的文件&#xff0c;如果这…
阅读更多...
C语言 基本数据类型及大小

C语言 基本数据类型及大小

一、基本数据类型 1.整型int 整型的关键字是int&#xff0c;定义一个整型变量时&#xff0c;只需要用int来修饰即可。也分为短整型和长整型。 2.浮点型 浮点型又分单精度浮点型float和双精度浮点型double。 3.字符型char 前面的整型和浮点型都是用于存放数字。字符型&…
阅读更多...
代理IP纯净度，对用户居然这么重要！

代理IP纯净度，对用户居然这么重要！

在网络应用和数据采集等领域&#xff0c;代理IP被广泛使用&#xff0c;而代理IP的纯净度则直接影响其性能和可用性。代理IP的纯净度主要涉及到代理IP在网络传输过程中的稳定性、匿名性和安全性。今天就带大家一起了解代理IP纯净度对用户的重要性。 第一&#xff0c;保护用户的隐…
阅读更多...
什么是物理机什么是虚拟机 2024年6款适用于Windows的虚拟机软件推荐 crossover Parallels Desktop Mac运行exe

什么是物理机什么是虚拟机 2024年6款适用于Windows的虚拟机软件推荐 crossover Parallels Desktop Mac运行exe

虚拟化是创建虚拟版本的过程&#xff0c;例如桌面、服务器或网络。它在物理上并不存在&#xff0c;但似乎确实存在。这种环境的虚拟版本可用于多种用途&#xff0c;包括测试和开发、灾难恢复和工作负载整合。虚拟化软件&#xff0c;也称为虚拟机 (VM) 软件&#xff0c;是一种允…
阅读更多...
最新文章

Copyright @ 2022~2023