「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件

SliderProgress 是鸿蒙系统中的常用 UI 组件。Slider 控制数值输入,如音量调节;Progress 显示任务的完成状态,如下载进度。本文通过代码示例展示如何使用这些组件,并涵盖 进度条类型介绍节流优化状态同步定时器动态更新

在这里插入图片描述


关键词
  • Slider 组件
  • Progress 组件
  • 节流优化
  • 定时器更新
  • 进度条样式
  • 状态同步

一、Slider 组件基础
1.1 基本用法

以下示例展示 Slider 组件的基础用法,用户可拖动滑块实时控制数值,并显示当前值:

@Entry
@Component
struct SliderExample {@State value: number = 50; // 初始化滑块值build() {Column() {// 显示当前滑块的值Text(`当前值: ${this.value}`).fontSize(18)// 创建滑块组件Slider({value: this.value, // 当前滑块值min: 0,max: 100,}).blockColor(Color.Blue) // 设置滑块颜色.trackColor(Color.Gray) // 设置轨道颜色.onChange((newValue) => this.value = newValue); // 实时更新值// 增添趣味的小猫图片Image($r('app.media.cat')).width('46%').height('95%')}}
}

效果示例

在这里插入图片描述


1.2 模拟禁用的 Slider

滑块组件没有直接的 disabled 属性。通过逻辑控制模拟启用和禁用状态,并使用节流函数减少频繁更新:

@Entry
@Component
struct LockedSlider {@State value: number = 50;@State isDisabled: boolean = true; // 控制滑块状态private lastTime: number = 0; // 记录上次更新时间// 节流函数,避免频繁触发更新throttleChange(newValue: number) {const now = Date.now();if (now - this.lastTime > 100) {this.value = newValue;this.lastTime = now;}}build() {Column() {Image($r('app.media.cat')) // 显示图片.width(305).height(360).margin({ bottom: 30 });Column() {Text(`滑块状态: ${this.isDisabled ? '禁用' : '启用'}`).fontSize(18).margin({ bottom: 10 });Text(`当前值: ${this.value}`).fontSize(18).margin({ bottom: 10 });Slider({value: this.isDisabled ? 50 : this.value,min: 0,max: 100,}).blockColor(this.isDisabled ? Color.Gray : Color.Blue).trackColor(Color.Gray).onChange((newValue) => {if (!this.isDisabled) this.throttleChange(newValue);});Button(this.isDisabled ? '启用滑块' : '禁用滑块').margin({ bottom: 20 }).onClick(() => (this.isDisabled = !this.isDisabled));}}.width('100%').height('100%').padding(10);}
}

效果示例

在这里插入图片描述


二、Progress 组件基础
2.1 Progress 组件的类型

Progress 组件支持多种样式,适用于不同的应用场景:

  • ProgressType.Linear:线性进度条
  • ProgressType.Ring:环形进度条
  • ProgressType.Eclipse:椭圆进度条

2.2 环形进度条示例
@Entry
@Component
struct RingProgress {@State progress: number = 75;build() {Column() {Progress({value: this.progress,total: 100,type: ProgressType.Ring,}).color(Color.Red) // 设置进度颜色.backgroundColor(Color.Green); // 设置背景颜色}.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).backgroundImage($r('app.media.cat')).margin(20).width('100%').height('100%')}
}

效果示例

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


2.3 使用滑块控制线性进度条
@Entry
@Component
struct VolumeControl {@State volume: number = 50;build() {Column() {Text('音量控制').fontSize(24).fontWeight(FontWeight.Bold).margin({ bottom: 20 });Progress({value: this.volume,total: 100,type: ProgressType.Linear,}).color(Color.Blue).height(8);Slider({value: this.volume,min: 0,max: 100,}).blockColor(Color.Blue).trackColor(Color.Gray).margin({ top: 20 }).onChange((newValue) => this.volume = newValue);}.padding(20);}
}

效果示例

在这里插入图片描述


三、定时器动态更新进度

通过定时器实现平滑更新进度:

@Entry
@Component
struct SmoothProgress {@State progress: number = 0;build() {Column() {Image($r('app.media.cat')).width('46%').height('96%');Progress({value: this.progress,total: 100,type: ProgressType.Capsule,}).color(Color.Green).onAppear(() => this.startTimer());}}startTimer(): void {setInterval(() => {if (this.progress < 100) this.progress += 1;}, 100);}
}

小结

本篇介绍了鸿蒙系统中的 SliderProgress 组件的使用,包括:

  1. 滑块控制与禁用模拟:通过逻辑实现启用与禁用状态;
  2. 节流优化:使用节流函数避免频繁触发更新;
  3. 多种进度条样式:了解环形、线性、胶囊等进度条;
  4. 定时器动态更新:通过定时器平滑更新进度条。

下一篇预告

下一篇将介绍 List 和 Grid 组件,展示如何实现数据列表的动态加载与展示。


上一篇:「Mac畅玩鸿蒙与硬件14」鸿蒙UI组件篇4 - Toggle 和 Checkbox 组件
下一篇:「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List 和 Grid 组件展示数据列表

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

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

相关文章

GitHub个人主页美化

效果展示 展示为静态效果&#xff0c;动态效果请查看我的GitHub页面 创建GitHub仓库 创建与GitHub用户名相同的仓库&#xff0c;当仓库名与用户名相同时&#xff0c;此仓库会被视作特殊仓库&#xff0c;其README.md&#xff08;自述文件&#xff09;会展示在GitHub个人主页…

Windows 命令提示符(cmd)中输入 mysql 并收到错误消息“MySQL不是内部或外部命令,也不是可运行的程序或批处理文件?

目录 背景: 过程&#xff1a; 1.找到MySQL安装的路径 2.编辑环境变量 3.打开cmd&#xff0c;输入mysql --version测试成功 总结: 背景: 很早之前安装了Mysql数据库&#xff0c;想查询一下当前安装的MySQL客户端的版本号&#xff0c;我在命令行界面输入mysql --verion命令回…

<项目代码>YOLOv8 夜间车辆识别<目标检测>

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…

太强了!Ollama + MaxKB零代码本地搭建个人知识库AI应用,数据安全,还可以有权限控制!!

零代码本地搭建AI应用 &#x1f4da; 借助开源的&#xff0c;大模型应用不再遥不可及 &#x1f680; 当提到“大模型”和“本地部署”&#xff0c;很多人可能第一反应是&#xff1a;“这是不是只有那些顶尖的技术大牛才能搞定&#xff1f;” 其实&#xff0c;随着开源工具的发…

速盾:企业该如何判断高防cdn的质量?

随着互联网的快速发展&#xff0c;网络安全问题也越来越突出。为了保护企业的网络安全&#xff0c;许多企业都选择了使用CDN&#xff08;内容分发网络&#xff09;来加强对自身网站的防护。而在选择CDN服务时&#xff0c;高防CDN无疑是企业的首选。那么&#xff0c;企业应该如何…

Unreal5从入门到精通之如何在指定的显示器上运行UE程序

前言 我们有一个设备,是一个带双显示器的机柜,主显示器是一个小竖屏,可以触屏操作,大显示器是一个普通的横屏显示器。我们用这个机柜的原因就是可以摆脱鼠标和键盘,直接使用触屏操作,又可以在大屏观看,非常适合用于教学。 然后我们为这款机柜做了很多个VR项目,包括Uni…

人工智能技术在网络安全领域被恶意利用

知识图谱 1. 量子信息技术├── 1.1 量子计算│ └── 威胁现有密码学│ └── 抗量子攻击的密码算法├── 1.2 量子通信│ └── 极高的安全性│ └── 量子密钥分发 (QKD)│ └── 检测窃听行为2. 云计算├── 2.1 多…

Docker安装XXL-JOB分布式调度任务

一、持久化 1、下载 xxl-job 源码,找到持久化脚本 2、创建 xxl-job 数据库,将上述文件中的脚本在本库执行即可 create database xxl_job charset utf8mb4 collate utf8mb4_general_ci; 二、安装 1、下载 xxl-job 镜像 docker pull xuxueli/xxl-job-admin:2.4.1 2、创建…

【华为HCIP实战课程三十】中间到中间系统协议IS-IS路由渗透及TAG标识详解,网络工程师

一、路由泄露 1、默认情况Level 1不会学到Level2的明细路由&#xff0c;L2可以学到L1的明细路由 2、FIB数据转发&#xff0c;路由负载&#xff0c;通过随机数据中的五元组hash,hash值决定数据走哪条链路 R1设备ping和telnet通过抓包查看走的都是S1/0/0接口 抓包进行过滤;ip.a…

如何将MySQL彻底卸载干净

目录 背景&#xff1a; MySQL的卸载 步骤1&#xff1a;停止MySQL服务 步骤2&#xff1a;软件的卸载 步骤3&#xff1a;残余文件的清理 步骤4&#xff1a;清理注册表 步骤五:删除环境变量配置 总结&#xff1a; 背景&#xff1a; MySQL卸载不彻底往往会导致重新安装失败…

死锁(Dead Lock)

目录 一. 死锁出现的场景 1. 一个线程, 一个锁对象 2. 两个线程, 两个锁对象 3. N个线程, M个锁对象 二. 造成死锁的必要条件 1. 锁是互斥的 2. 锁是不可被抢占的 3.请求和保持 4. 循环等待 三. 死锁的解决方案 1. 预防死锁 2. 死锁产生后的解决 一. 死锁出现的场景…

C++各个版本的主要特性

C是一种高级编程语言&#xff0c;以其强大的功能、灵活性和高效性而闻名。随着C标准的不断更新&#xff0c;C语言持续发展&#xff0c;各个版本引入了不同的主要特性&#xff0c;以适应现代软件开发的需求。以下是对C各个版本主要特性的归纳&#xff1a; C98/03 值初始化&…

【Android 系统中使用CallStack类来追踪获取和操作调用栈信息】

Android系统CallStack类的使用 定义使用方法使用场景注意事项应用举例 定义 在 Android 系统中&#xff0c;CallStack 类是一个用于获取和操作调用栈信息的工具类。这个类通常用于调试和日志记录&#xff0c;以帮助开发者了解函数调用的顺序和位置。以下是您提供的代码片段的解…

自然语言处理方向学习建议

自然语言处理方向学习建议 自然语言处理&#xff08;NLP&#xff09;作为人工智能的一个重要分支&#xff0c;近年来在学术界和工业界都取得了显著的发展。作为即将或正在攻读博士学位的你&#xff0c;投身于NLP领域无疑是一个充满挑战与机遇的选择。以下是一些针对NLP方向学习…

深度学习基础知识-残差网络ResNet

目录 一、ResNet 的核心思想&#xff1a;残差学习&#xff08;Residual Learning&#xff09; 二、ResNet 的基本原理 三、ResNet 网络结构 1. 残差块&#xff08;Residual Block&#xff09; ResNet 的跳跃连接类型 2. 网络结构图示 四、ResNet 的特点和优势 五、ResNe…

【Mac】安装 VMware Fusion Pro

VMware Fusion Pro 软件已经正式免费提供给个人用户使用&#xff01; 1、下载 【官网】 下拉找到 VMware Fusion Pro Download 登陆账号 如果没有账号&#xff0c;点击右上角 LOGIN &#xff0c;选择 REGISTER 注册信息除了邮箱外可随意填写 登陆时&#xff0c;Username为…

基于springboot+vue实现的网上书店系统 (源码+L文)

基于springbootvue实现的网上书店系统 &#xff08;源码L文&#xff09;4-104 5.1 系统主要功能设计 整体系统的主要功能模块如图5-1&#xff1a; 图5-1系统总体功能图 5.1.1 用户端功能 用户端的主要功能设计包括首页、图书信息、商城公告、购物车等模块&#xff0c;这些功…

鸿蒙5.0时代:原生鸿蒙应用市场引领开发者服务新篇章

前言 10月22日原生鸿蒙之夜发布会宣布HarmonyOS NEXT正式发布&#xff0c;首个版本号&#xff1a;鸿蒙5.0。这次“纯血鸿蒙”脱离了底层安卓架构成为纯国产的独立系统&#xff0c;仅凭这一点就有很多想象空间。 目前鸿蒙生态设备已超10亿&#xff0c;原生鸿蒙操作系统在中国市…

算法效率(时间复杂度、空间复杂度,提高算法效率的方法)

目录 1.复杂度的概念 2.复杂度的重要性 3.时间复杂度 3.1⼤O的渐进表⽰法 4.空间复杂度 5.提高算法效率的方法 算法效率‌是指算法执行的时间&#xff0c;具体来说&#xff0c;是通过依据该算法编制的程序在计算机上运行时所消耗的时间来度量的‌。算法效率是衡量算法优劣…

Python 多个版本管理 -- 最简方式

目录 一、下载Python文件 二、安装文件&#xff0c;并配置环境变量 三、重命名Python.exe 四、配置完毕&#xff0c;开始使用&#xff0c;效果图 一、下载Python文件 Python 官方地址The official home of the Python Programming Languagehttps://www.python.org/downloa…